javascript - 由于react组件的key值出现错误但不知道如何更改

标签 javascript reactjs

我将键值更改为 c.createdAt c.id 但出现错误 我该如何修复它?

            {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, …}

错误信息是这样的:

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

不知道关键错误发生在哪里

我正在更改所有键值,但不起作用

最佳答案

您的代码的问题是您正在 <PostCard/> 中传递一个对象组件的键。这必须是字符串或整数。

将您的返回码重写为

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

因为c是一个对象

关于javascript - 由于react组件的key值出现错误但不知道如何更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58899642/

相关文章:

javascript - 不使用样式属性定位 dom 元素?

javascript - 回到滚动条末尾开始

javascript - 在contenteditable div中获取图片删除

javascript - 如何使用react-router-dom发送参数而不使用 <Link> 标签

javascript - 如何防止 github 在我的 React 代码中突出显示撇号

javascript - 如何在 React 中更改字体颜色、字体大小和按钮颜色

Javascript 传播运算符替代

javascript - 在不使用 Canvas 的情况下在 JavaScript 中调整 Base-64 图像的大小

javascript - 在线JavaScript编辑器(例如inDesign)

javascript - 如何在语义-ui react 中设置最小高度