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

Question

I want to update child component props from Parent component my senarios is I have one component which I am passing one array list which is come from API response so below is my code

                    <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) }}
                        />

in above code underLineValue is my array list which is come from API side and when I change month at that time i onVisibleMonthsChange props is called and I get newly updated month and year so again I am calling API for that and fill new my updated array refer my getChangeMonth method as below

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 callback I fill updated arraylist underLineValue but in DateRangePicker when i print it's props I did't get updated arraylist so any one have idea how can i solve this issue? Your all suggestions are welcome

Answer 1

You can use getDerivedStateFromProps method in child component like this:

 import isEqual from 'lodash/isEqual'

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

This will update your child component. Let me know if it's working.