Reactjs 向React中的子元素添加键

我收到如下信息： '警告：列表中的每个子项都应具有唯一的“键”属性'

有没有办法自动向“内容”中的元素添加键

const ArticlesArray = [
  {
    id: 2,
    title: `title`,
    subtitle: `subtitle`,
    linkUrl: `articles/2`,
    content: [
    <h5>text</h5>,
      <p>
        more text
      </p>,

      <p>
        and some more text
      </p>
    ]
  },
];

return (
    <div className="article-container">
      <h3> {filteredArticle[0].title} </h3>
      <h4> {filteredArticle[0].subtitle} </h4>
      <hr />
      <div>
      { filteredArticle[0].content.map(p => 
        p)
      }
        </div>
    </div>
  );

const ArticlesArray=[
{
id:2，
标题：`title`，
副标题：`subtitle`，
链接URL:`articles/2`，
内容：[
文本

更多文本
,，

还有一些文字

]
},
];
返回(
{filteredArticle[0]。标题}
{filteredArticle[0]。副标题}

{filteredArticle[0].content.map（p=>
（p）
}
);

编辑：已解决

<div>
        {filteredArticle[0].content.map((p, idx) => (
          <div key={idx}>{p}</div>
        ))}
      </div>

{filteredArticle[0].content.map（（p，idx）=>(
{p}
))}

我建议重新考虑您的用例，因为它可能是一种反模式。回答你的问题：你可以在内容数组中循环，很容易地为每个条目设置一个键，例如

ArticlesArray[0].content = ArticlesArray[0].content.map((e, idx) => (e.key = idx, e));

---

上面的代码将内容数组中每个元素的键设置为其索引。

您的问题并没有真正完成。如果让我猜猜，您正在尝试通过

map

方法基于

ArticlesArray

渲染组件

如果是这样的话，你可以参考下面的内容

render（）{
return articlesaray.map（ele=>(
//您可以尝试将唯一密钥添加到组件中

$return(
    <CustomComponents 
        key={item.id}     //unique key id
    />
);

$return(
);

或

$render（）{
返回(
{this.props.results.map（（result，i）=>(
{result.data}
))}
);
}

$render() {
return (
  <ol>
    {this.props.results.map((result, i) => (
      <li key={i}>{result.data}</li>
    ))}
  </ol>
);
}