4

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 -

enter image description here

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!

trurohit
  • 411
  • 1
  • 8
  • 19
  • 3
    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

1 Answers1

1

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!

esinator
  • 11
  • 1