React Infinite Scroller - Two children with the same key. loadMore function being called twice

Question

I'm trying to build an infinite scroll of posts similar to facebook using react-infinite-scroller. However, it's giving me the same error multiple times in the console -

"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."

This is the Render function

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

This is the fetchPosts function -

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

This is the initial state -

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

Any ideas on what I might be doing wrong? Whenever I run this code, the posts in page 1 get rendered twice and I see these errors in the console -

As you can see the request with PageIndex = 1 is being called twice which is the reason the warnings are popping up.

Not sure what I'm missing. Any suggestions would be highly appreciated. Thank you!

it looks like a bug of infinit-scroller lib. I have almost the same situation, when callback function, which loads more results, calls several times instead of 1 time — Vaha, Sep 03 '20 at 14:50

score 1 · Answer 1 · answered Jan 12 '21 at 04:24

This is a late response but hopefully will help others with the same issue. I had a similar issue with duplicate data loading when implementing a similar package, the React Infinite Scroll Component. What worked for me after some research and debugging was remembering that setState is asynchronous and may be batching state changes. Try changing the form of setState to accept a function instead of an object (React docs):

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

Hope that helps some folks!

score -1 · Answer 2 · edited Sep 16 '22 at 08:24

-1

Just change key value then your problem will be solved

{posts.map((p,index) => {return (<Post key={index} data ={p}/>})}

edited Sep 16 '22 at 08:24

tom redfern

30,562
14
91
126

answered Sep 10 '22 at 04:37

Jyoti Sharma

1
1

Just change key value then your problem will be solved – Jyoti Sharma Sep 10 '22 at 04:38
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32686571) – kavigun Sep 15 '22 at 08:37
Please don't post code-only answers. The main audience, future readers, will be grateful to see explained *why* this answers the question instead of having to infer it from the code. Also, since this is an old question, please explain how it complements the other answer. – Gert Arnold Sep 15 '22 at 16:28

React Infinite Scroller - Two children with the same key. loadMore function being called twice

2 Answers2

Linked