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

Question

我想从父组件更新子组件 props 我的场景是我有一个组件，我正在传递一个来自 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;
}

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

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

Update child component props from Parent component react native

javascript

components

reactjs

react-native

react-native-calendars