从父组件中更新子组件的道具。

Question

我想从父组件中更新子组件的道具，我的情况是我有一个组件，我要传递一个来自API响应的数组列表，所以下面是我的代码。

                    <DateRangePicker
                        theme={{
                            calendarBackground: colors.white,
                            selectedDayBackgroundColor: colors.kellyGreen,
                            selectedDayTextColor: colors.white,
                            todayTextColor: colors.kellyGreen,
                            dayTextColor: colors.intrestedButton,
                            dotColor: colors.kellyGreen,
                            selectedDotColor: colors.kellyGreen,
                            arrowColor: colors.kellyGreen,
                            monthTextColor: colors.black,
                            textDayFontFamily: globals.SFProTextRegular,
                            textMonthFontFamily: globals.SFProTextMedium,
                            textDayHeaderFontFamily: globals.SFProTextMedium,
                            textMonthFontWeight: "bold",
                            textDayFontSize: globals.font_11,
                            textMonthFontSize: globals.font_16,
                            textDayHeaderFontSize: globals.font_13
                        }}
                        minDate={null}
                        isFrom={'golfActivity'}
                        monthFormat={globals.selectedLocal.DATE_MMMMyyyy}
                        initialRange={[this.state.fromDate, this.state.toDate]}
                        onSuccess={(s, e) => this.setState({ fromDate: e, toDate: s })}
                        theme={{ markColor: colors.kellyGreen, markTextColor: colors.white 
                        }}
                        underLineValue = {this.state.underLineValue} 
                        onVisibleMonthsChange={months => { this.getChangeMonth(months) }}
                        />

在上面的代码中，underLineValue是我的数组列表，它来自API端，当我改变月份的时候，我onVisibleMonthsChange道具被调用，我得到了新的更新的月份和年份，所以我再次调用API，并填充新的我的更新数组，参考我的getChangeMonth方法，如下所示

getChangeMonth = (months) => {
    countCall = countCall + 1
    if (countCall === 1) {
        this.setState({isMonthChange: true})
        visibleMonth = months[months.length - 1].month;
        visibleYear = months[months.length - 1].year;
        globals.visibleMonth= visibleMonth;
        globals.visibleYear= visibleYear;
        console.log("on visible month", visibleMonth);
        console.log("on visible year", visibleYear);
        this.callCounterAPI(visibleMonth, visibleYear); 
        countCall = - 1
    }
}

callCounterAPI(month, year){
    this.setState({ underLineValue: []})
    API.getCalendarCount(this.onResponseCalendarCount, month, year,true)
}

onResponseCalendarCount = {
    success: (response) => {
          this.setState({underLineValue: response.data })
    },
    error: (err) => {
        console.log("onResponseCalendarCount error-->>", err);

    },
    complete: () => {
    }
}

export default class DateRangePicker extends Component<Props> {
 state = { isFromDatePicked: false, isToDatePicked: false, markedDates: {} }

 componentDidMount() {
   console.log("DateRangePicker-->"+ JSON.stringify(this.props));

   }
}

onResponseCalendarCount回调，我在LineValue下填写了更新的数组列表，但在DateRangePicker中，当我打印它的道具时，我没有得到更新的数组列表，所以任何人都知道如何解决这个问题？欢迎大家的建议

Answer 1

你可以在子组件中使用getDerivedStateFromProps方法，像这样。

 import isEqual from 'lodash/isEqual'

   static getDerivedStateFromProps(props, state) {
    if (!isEqual(props.underLineValue, state.underLineValue)) {
        return {
            underLineValue: props.underLineValue
        }
    }
    return null;
}

这将更新你的子组件。让我知道它是否有效。