警告：列表中的每个子元素都应该有一个唯一的“key”属性。使用的框架是React。

Question

我有这个：

{array.map((item) => (
                <>
                    <input
                        key={item.id}
                        type="checkbox"
                    />
                    <h3>{item.value}</h3>
                </>
            ))}

在网站上我看到一个警告："警告：列表中的每个子元素都应该有一个唯一的“key”属性"，但是我已经加上了“key”属性。有人知道原因吗？

- pop

---

key={item.id} 必须放在 <> 元素上，而不是 <input> 元素上（如果这样做甚至可能的话；我的 React 已经生疏了）。 - Tim Lewis

Answer 1

这里的片段元素（<></>）是顶级子元素，需要一个key属性。使用的短语法不支持添加属性，但较长的语法支持：

<React.Fragment key={item.id}>
  <input type="checkbox" />
  <h3>{item.value}</h3>
</React.Fragment>

- David