React/Material UI 中的唯一键答案

【问题标题】：Unique Key in React/Material UiReact/Material UI 中的唯一键
【发布时间】：2021-07-04 22:32:39
【问题描述】：

我收到以下错误“列表中的每个孩子都应该有一个唯一的“关键”道具。”当我渲染时

App.js

const blogPosts = [
  {
    title: '...',
    description:
      '...',
  },
  {
    title: '...',
    description:
      '...',
  },
  {
    title: '...',
    description:
      '...',
  },
];

const App = () => {
  return (
 <Blog post={blogPosts} /> )

博客.js

<Typography gutterBottom variant="h6" component="h2" className={classes.typoTitle}>{
                    [post[0]].map(title0 => <div>{title0.title}></div>)
                  }
                  </Typography>

<Typography component="h1" variant="subtitle1" color="inherit" gutterBottom>
                    {
                      [post[0]].map(title0 => <div> {title0.description}></div>)
                    }
                  </Typography>

我在 App.js 中为我的 const 中的另外 2 个道具执行此操作，仅更改了我的关键帖子的索引（[post[0]]、[post[1]]、[post[2]]）。

添加密钥时，我没有出现以下错误，但我的道具没有显示。

 <Typography gutterBottom variant="h6" component="h2" className={classes.typoTitle}>{
                    [post[0]].map(title0 => <div key={title0.title}></div>)
                  }
                  </Typography>
                  <Typography component="h1" variant="subtitle1" color="inherit" gutterBottom>
                    {
                      [post[0]].map(title0 => <div key={title0.description}></div>)
                    }
                  </Typography>

非常感谢。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

添加密钥时，我没有出现以下错误，但我的道具是没有显示。

因为您没有将值传递给 html 标记。您还需要解析 div 组件中的值。我已经更新了你的代码。请看一下。

<Typography gutterBottom variant="h6" component="h2" className={classes.typoTitle}>{
  [post[0]].map(title0 => <div key={title0.title}>{title0.title}</div>)
}
</Typography>
<Typography component="h1" variant="subtitle1" color="inherit" gutterBottom>{
    [post[0]].map(title0 => <div key={title0.description}>{title0.description}</div>)
  }
</Typography>

【讨论】：