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

【问题标题】：React Infinite Scroller - Two children with the same key. loadMore function being called twiceReact Infinite Scroller - 两个具有相同键的孩子。 loadMore 函数被调用两次
【发布时间】：2019-02-18 15:10:01
【问题描述】：

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

"遇到两个孩子用同一个key，shdj1289.keys应该是唯一的，以便组件在更新期间保持其身份。非唯一键可能会导致子项重复和/或省略 — 该行为不受支持，可能会在未来版本中更改。”

这是渲染函数

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 的请求被调用了两次，这就是弹出警告的原因。

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

【问题讨论】：

它看起来像一个无限滚动库的错误。我有几乎相同的情况，当加载更多结果的回调函数调用多次而不是1次时

标签： javascript reactjs

【解决方案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)}));

希望对一些人有所帮助！

【讨论】：