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下填充更新的arraylist，但是在打印它的道具时在DateRangePicker中，我没有获取更新的arraylist，所以任何人都知道如何解决此问题？欢迎您提出所有建议

Answer 1

您可以在子组件中使用getDerivedStateFromProps方法，如下所示：

 import isEqual from 'lodash/isEqual'

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

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

从父组件更新子组件道具本机反应

1 个答案: