时间戳

首页 > 解决方案 > 如何在状态/道具更改时重新渲染 react-native flatList 中的特定行？

reactjs - 如何在状态/道具更改时重新渲染 react-native flatList 中的特定行？

问题描述

我是 react-native 和 redux 的新手。我有一个 flatList 可以显示来自使用 redux 的 api 调用的列表详细信息。每当我尝试编辑/删除列表项时，flatList 不会在更改后重新呈现。

我也尝试过使用 extraData 道具，但没有任何结果。认真寻求帮助！

 <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>

这是我的 componentWillRecieveProps 方法，

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

我的组件DidMount，

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

我的减速机看起来像这样，

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;

标签： reactjsreact-nativeredux

解决方案

我认为 ComponentWillReceiveProps 没有得到任何更新的道具，所以它不会调用 setState 方法，因此 FlatList 不会再次呈现。您需要检查是否再次调用 ComponentWillReceiveProps。只需在 if 条件后添加控制台或警报。

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

推荐阅读