使用 React Hooks 的 FlatList 分页

Question

我有一个简单的列表，滚动到底部时需要分页。目前初始数据数组工作没有任何问题。但是当我想将下一个数组附加到现有数组时，问题就来了。 numberList 被新数组替换。但不知道如何附加到它。 下面是我的实现。

export default function Numbers({ route, navigation }) {
  const dispatch = useDispatch();
  const { url } = route.params;

  const numberList = Object.values(
    useSelector(state => state.numberReducer.numbers),
  );

  const [count, setCount] = useState(2);

  useEffect(() => {
    console.log('URL ', url);
    dispatch(numberActions.requestNumbers(url));
  }, []);


  const fetchMore = () => {
    console.log('Fetch More');
    setCount(count + 1);
    const newUrl = "Another URL depending on the Count number";

    /** This also gets fired. problem is New Number list gets replaced to numberList. dont know how to append **/
    dispatch(numberActions.requestNumbers(newUrl));
  };

  const renderNumber = numberObject => {
    return (
      <Text>
        {numberObject.item.title}
      </Text>
    );
  };

  return (
    <SafeAreaView>
      <FlatList
        data={numberList}
        keyExtractor={(item, index) => item.title}
        renderItem={renderNumber}
        horizontal={false}
        onEndReached={fetchMore}
        onEndReachedThreshold={0.1}
      />
    </SafeAreaView>
  );
}

我的减速器

const initialState = {
  numbers: [],
};

export const numberReducer = createReducer(initialState, {
  [types.NUMBER_RESPONSE](state, action) {
    return {
      ...state,
      numbers: action.response,
    };
  },
});

Answer 1

我不确定这是否是问题所在，如果您能提供一个我可以运行的完整示例，我可以尝试为您提供更多帮助。

假设调用 fetchMore 后会在你的 reducer 中以 types.NUMBER_RESPONSE 结束，action.response 包含要添加的数字，看起来你正在覆盖旧数字。

你可以尝试更换你的reducer而不是

 return {
      ...state,
      numbers: action.response,
    };

试试

 return {
      ...state,
      numbers: [...state.numbers, ...action.response]
    };

或任何其他将数字添加到旧 state.numbers 的东西