javascript - React Infinite Scroller - 两个具有相同键的 child 。 loadMore 函数被调用两次

Question

我正在尝试使用 react-infinite-scroller 构建类似于 facebook 的无限滚动帖子。但是，它在控制台中多次给我相同的错误 -

"Encountered two children with the same key, shdj1289. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."

这是渲染功能

render() {
        const { loading, userData, circleData, redirectToLogin, posts } = this.state;
        return redirectToLogin ? <Redirect to="/" /> : (
            <Container>
                <h1>Hi {userData.firstName}</h1>
                
                <InfiniteScroll
                    loadMore={this.fetchPosts}
                    hasMore={this.state.hasMore}
                    useWindow={false}
                    loader={<div key={0}></div>}
                >
                    {posts.map(p => {
                        return (<Post key={p.postIdentity} data={p} />);
                    })}
                </InfiniteScroll>
            </Container>
        )
    }

这是 fetchPosts 函数 -

fetchPosts = () => {
        const postQuery = {
            "PageIndex": this.state.start + 1,
            "PageSize": this.state.count,
            "Id": "shjhdjs"
        }
        request({
            url: 'http://www.example.com/posts',
            method: 'POST',
            data: postQuery
        }).then((res) => {
                if(res.data.length === 0) return this.setState({ hasMore: false });
                this.setState({ start: this.state.start + 1, posts: this.state.posts.concat(res.data)});
        }).catch((err) => console.log(err))
    }

这是初始状态——

state = {
        start: 0,
        count: 10,
        hasMore: true
    }

关于我可能做错了什么的任何想法？每当我运行此代码时，第 1 页中的帖子都会呈现两次，并且我在控制台中看到这些错误 -



如您所见，PageIndex = 1 的请求被调用了两次，这就是弹出警告的原因。

不知道我错过了什么。任何建议将不胜感激。谢谢!

Answer 1

这是一个迟到的回应，但希望能帮助其他人解决同样的问题。在实现类似的包 React Infinite Scroll Component 时，我遇到了类似的重复数据加载问题。 .经过一些研究和调试后，对我有用的是记住 setState是异步的，可能正在批处理状态更改。尝试更改 setState 的形式接受一个函数而不是一个对象(React docs):

//in your fetch call
this.setState((previousState) => ({ start: previousState.start + 1, posts: previousState.posts.concat(res.data)}));

希望能帮助到一些人!