在 React 中使用地图时如何摆脱 'key' 错误？

Question

每个人都知道这个错误：Each child in a list should have a unique "key" prop 但是如果我有一个字符串数组，我想在我的段落中以
结尾呈现怎么办？

return(
    <p>
    {array.map(string => {
        return <>{string}<br/></>
    })}
    </p>
)

如您所见，我实际上只返回末尾带有 <br/> 的文本，我没有地方也不需要密钥。我怎样才能摆脱这个错误？将 <span> 中的每个短语换行不是一种选择。

Answer 1

您可以像这样使用地图索引作为段落的键：

return(
    <p>
    {array.map((string,index)=> {
        return <React.fragment key={index}>{string}<br/></React.fragment>
    })}
    </p>
)

Answer 2

当 React 呈现更改时，在将更改推送到 DOM 之前，它使用 virtual DOM 智能地决定它需要推送哪些更改以保持效率，因为 DOM 操作可能是一项昂贵的操作。

渲染子元素的集合时，比方说一些 <li> 元素，当没有提供唯一的 key 属性时，React 会报错。它需要这个道具的原因是它可以执行我上面提到的智能决策。

哦，正如评论中提到的@JBallin，您应该将 key 属性定义为字符串，因为不建议为其使用索引：

return(
  <p>
    {array.map((string, index) => <React.Fragment key={index.toString()}>{string}<br/></React.Fragment>)}
  </p>
);

How to get rid of 'key' error while using map in React?