由于react组件的key值出现错误但是不知道怎么改

Question

I changed the key value to c.createdAt c.id but got an error How can I fix it?

            {me && <PostForm />}
            {mainPosts.map((c) => {
                console.log("c : ", c);
                return (
                    <PostCard key={c} post={c} />
                );
            })}

c :  {id: 35, content: "asdfasdfadf", createdAt: "2019-11-17T06:49:45.000Z", updatedAt: "2019-11-17T06:49:45.000Z", UserId: 1, …}
index.js:27 c :  {id: 34, content: "asdfasdfadfadf", createdAt: "2019-11-17T06:02:45.000Z", updatedAt: "2019-11-17T06:02:45.000Z", UserId: 1, …}
index.js:27 c :  {id: 33, content: "asdfasdf 1111", createdAt: "2019-11-16T11:01:24.000Z", updatedAt: "2019-11-16T11:01:24.000Z", UserId: 1, …}
index.js:27 c :  {id: 32, content: "asdfaa 1111", createdAt: "2019-11-16T10:45:37.000Z", updatedAt: "2019-11-16T10:45:37.000Z", UserId: 1, …}

error message is this:

Uncaught TypeError: Cannot read property 'key' of undefined
    at List._this.renderItem (:3060/_next/static/development/pages/_app.js?ts=1574030957536:22355)
    at :3060/_next/static/development/pages/_app.js?ts=1574030957536:22465
    at Array.map (<anonymous>)
    at List._this.renderList (:3060/_next/static/development/pages/_app.js?ts=1574030957536:22464)
    at updateContextConsumer (:3060/_next/static/development

I don't know where the key error occurs

I'm changing all the key values but it doesn't work

Answer 1

The Problem with your code is you are passing an object in your <PostCard/> component' key. this needs to be either string or integer.

rewrite your return code to

<PostCard key={c.id} post={c} />

because c is an object