FlatList Pagination with ReactHooks

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 后最终会在类型中出现在您的化简器中。NUMBER_RESPONSE包含要添加的数字的 action.response，您似乎正在覆盖旧数字。

您可以尝试更换减速器而不是

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

尝试

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

或任何其他将数字添加到旧状态的任何其他内容。