使用平面列表时更新我的数据会导致"Maximum call stack size exceeded"

Question

当使用<FlatList>和onEndReached加载数据时，我得到了一个非常烦人的Maximum call stack size exceeded.。onRefresh不会导致这种情况。我认为这与更新数据时<FeedList>的重新渲染有关。

有人能帮我解决这个问题吗？或者至少给我指明正确的方向？

export function useFeedState() {
const state = useState(feedState);
const api = useApi();
function loadPosts(clear = false) {
api
.request<{ posts: IPost[] }>('get', 'posts', { feed: state.feed.value })
.then((data) => {
state.posts.set(
clear ? data.posts : [...state.posts.value, ...data.posts]
);
})
.catch((error) => {
console.log(error);
});
}
// ...
}

组件：

export default function FeedList() {
const feedState = useFeedState();
return (
<FlatList
data={feedState.posts}
renderItem={({ item }) => <PostSlide post={item} />}
keyExtractor={(item) => item.id.toString()}
refreshing={feedState.isLoading}
onRefresh={() => feedState.loadPosts(true)}
onEndReached={() => {
feedState.loadPosts();
}}
/>
);
}

Answer 1

我通过在set-方法中使用回调来解决这个问题。Hookstate是建立在Reacts状态之上的，因此有一些相似之处。你可以在这里阅读更多关于何时使用回调的信息。

// works
state.posts.set((prev) => {
return clear ? data.posts : [...prev, ...data.posts];
});
// also works
clear ? state.posts.set(data.posts) : state.posts.merge(data.posts);
// doesn't work
state.posts.set(
clear ? data.posts : [...state.posts.value, ...data.posts]
);

我想循环的原因可能是使用了我正在更新的同一状态的值。