Question

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

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

我的减速器是这样的

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

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

sudo apt install libsdl1.2-dev

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

1 个答案: