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

Question

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

  

“遇到了两个具有相同密钥shdj1289的孩子。密钥应该   唯一，以便组件在更新中保持其身份。   非唯一键可能会导致子代重复和/或省略—   该行为不受支持，并且可能在将来的版本中更改。”

这是“渲染”功能

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)}));

希望能帮助到一些人！