React Infinite Scroller - 两个孩子拥有相同的钥匙。loadMore 函数被调用两次

Question

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

\n\n

\n

“遇到两个具有相同密钥的子项。shdj1289密钥应该\n是唯一的，以便组件在更新时保持其身份。\n非唯一的密钥可能会导致子项重复和/或省略\xe2\x80\x94\n该行为不受支持，并且可能在未来版本中发生变化。”

\n

\n\n

这是渲染函数

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

这是 fetchPosts 函数 -

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

这是初始状态——

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

\n\n

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

\n\n

不确定我错过了什么。任何建议将不胜感激。谢谢你！

\n

Answer 1

这是一个迟到的回复，但希望能帮助其他遇到同样问题的人。在实现类似的包React Infinite Scroll Component时，我遇到了类似的重复数据加载问题。经过一些研究和调试后，对我有用的是记住这setState是异步的，并且可能是批量状态更改。尝试更改 的形式setState以接受函数而不是对象（React文档）：

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

希望对一些人有帮助！