React Native：如何在mapStateToProps中为Prop追加数据而非覆盖

看起来你遇到的问题是Redux reducer在获取新数据时直接覆盖了原有状态，对吧？别担心，只需要调整reducer里处理成功请求的逻辑就能实现数据追加了，我来一步步给你讲清楚：

核心问题所在 #

你的reducer在处理dataSearch.success动作时，直接用新的payload替换了state.results，这就是原有数据被覆盖的原因。要实现追加，我们需要把新数据和旧数据合并，同时保持Redux状态的不可变性。

步骤1：修改Reducer的状态更新逻辑 #

把reducer里更新results的代码改成合并新旧数组的形式，用扩展运算符(...)来创建新数组，避免直接修改原状态：

[combineActions(actions.dataSearch.success, actions.dataSearch.fail)]: ( state, { payload, meta, error } ) => {
  const hasResults = payload && !error;
  return {
    ...state,
    isLoading: false,
    error: error && payload.message,
    // 合并原有结果和新结果，实现追加
    results: hasResults ? [...state.results, ...payload] : state.results,
  };
};

这里的关键是[...state.results, ...payload]：它会先展开原有的results数组，再展开新的payload数组，把两者的元素合并成一个全新的数组，这样就不会覆盖旧数据了。

步骤2：确认新数据的结构 #

要确保后端返回的payload是一个数组，并且和state.results的元素结构一致。如果后端返回的是单个数据对象，记得把它包装成数组，比如[payload]，这样扩展运算符才能正确拼接。

额外的分页小提示 #

如果你的场景是分页加载数据，记得在请求nextBatchOfData时传递分页参数（比如page、offset），让后端返回对应页的数据。这样reducer里的追加逻辑就能自然实现分页加载，不会重复加载相同数据。

另外，你的mapStateToProps里的dataSelectors.getOfferResults(state)应该是正确指向state.results的，这样组件就能拿到合并后的完整数据，FlatList也能正常渲染所有内容了。

这样修改之后，下次调用getData()触发新数据请求时，原有状态里的旧数据就会被保留，新数据会追加进去，不会再出现覆盖的问题啦！

内容的提问来源于stack exchange，提问作者Surinder Bhomra