如何在状态/道具更改中的react-native flatList中重新呈现特定行？

Question

I am new to react-native and redux.I have a flatList to show a list details from an api call using redux.Whenever I try to edit/delete a list item,flatList does not re-render upon the changes.

I have tried with extraData props also,but nothing worked out.Seriously looking for help!!

 <FlatList
                data={this.state.vacationsDataSource}
                keyExtractor={(item, index) => index}
                extraData={this.props.Vacations_reducer.vacationsData}
                renderItem={({ item }) => (
                  <View style={styles.mainView_contact}>
                    <View style={{ flexDirection: "row" }}>
                      <View style={styles.Txt_hight}>
                        <Text style={styles.SecName}>Start date </Text>
                      </View>
                      <View>
                        <Text style={styles.name2}>
                          {dateFormat(item.vacationFrom, "mmmm dS, yyyy")}
                        </Text>
                      </View>
                    </View>

Here is my componentWillRecieveProps method,

componentWillReceiveProps(nextProps) {
    if (this.props.Vacations_reducer.vacationsData != nextProps.Vacations_reducer.vacationsData) {
      this.setState({
        vacationsDataSource: nextProps.Vacations_reducer.vacationsData
      });
    }
  }

My componentDidMount,

componentDidMount() {
    this.props.onRenderFetchVacations().then((res) => {
      this.setState({
        vacationsDataSource: this.props.Vacations_reducer.vacationsData
      });
    });
    Keyboard.addListener("keyboardDidShow", this._keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", this._keyboardDidHide);
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

And my reducer looks like this,

const VacationDetailReducer = (state = DEFAULT_STATE_VAC, action) => {
  switch (action.type) {
    case VAC_FETCH_LOADING:
      return {
        ...state,
        isLoading: true
      };

    case VAC_FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
        vacationsData: action.vacationsData
      };

    case VAC_FETCH_FAIL:
      return {
        ...state,
        isLoading: false,
        vacationsData: action.vacationsData
      };
case ADD_VAC_FETCH_SUCCESS:
      return {
        ...state,
        //isLoading: false,
        addVacationData: action.addVacationData
      };

    case ADD_VAC_FETCH_FAIL:
      return {
        ...state,
        //isLoading: false,
        addVacationData: action.addVacationData
      };

    case UPDATE_VAC_FETCH_SUCCESS:
      return {
        ...state,
        //isLoading: false,
        updateVacationData: action.updateVacationData
      };

    case UPDATE_VAC_FETCH_FAIL:
      return {
        ...state,
        //isLoading: false,
        updateVacationData: action.updateVacationData
      };

    case DELETE_VAC_FETCH_SUCCESS:
      return {
        ...state,
        //isLoading: false,
        deleteVacationData: action.deleteVacationData
      };

    case DELETE_VAC_FETCH_FAIL:
      return {
        ...state,
        //isLoading: false,
        deleteVacationData: action.deleteVacationData
      };

    default:
      return state;
  }
};

export default VacationDetailReducer;

Answer 1

I think ComponentWillReceiveProps doesn't get any updated props, so it doesn't call the setState method and thus the FlatList not rendered again. You need to check if the ComponentWillReceiveProps is again called or not. Just add a console or alert after the if condition.

componentWillReceiveProps(nextProps) {
   if (this.props.Vacations_reducer.vacationsData != nextProps.Vacations_reducer.vacationsData) {
   console.log("Hello")
   this.setState({
     vacationsDataSource: nextProps.Vacations_reducer.vacationsData
   });
 }
}