时间戳

首页 > 解决方案 > 从父组件更新子组件道具反应原生

javascript - 从父组件更新子组件道具反应原生

问题描述

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

在上面的代码中，LineValue 是我的数组列表，它来自 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，所以有人知道我该如何解决这个问题？欢迎您提出所有建议

标签： javascriptreactjsreact-nativecomponentsreact-native-calendars

解决方案

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

 import isEqual from 'lodash/isEqual'

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

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

推荐阅读