如何将唯一 id 作为道具传递给另一个组件答案

【问题标题】：How to pass a unique id as a prop to another component如何将唯一 id 作为道具传递给另一个组件
【发布时间】：2020-03-01 22:02:54
【问题描述】：

我正在创建一个待办事项以对实践某些概念做出反应，并且我目前正在尝试将我的列表项作为一个单独的组件来帮助使状态迭代更清晰，其中包含复选框和添加/删除按钮列表中的每一项。

当迭代状态以创建每个列表项时，我试图将每个项目的 id 传递给列表，以便根据 react 的请求为每个 li 元素提供唯一的 id。我的代码目前如下：

App.js

function App() {
  const [items, setItems] = useState([ 

  ])

  const addItem = (item) => {
    if(item === '') {return}
    setItems([...items, { item, id: uuid() }])
  }

  return (
    <Layout>
      <div>
        <h1>To-Do</h1>
        <Input addItem={addItem}/>
        <ul>
          {items.map(i => (
            <ListItem 
              id={i.id}>
                {i.item}
            </ListItem>
          ))}
        </ul>
      </div>
    </Layout>
  );
}

ListItem.js

const ListItem = (props) => {
    return (
        <li key={props.id}>{props.children}</li>
    )
}

我正在使用 react-uuid 创建唯一 ID。从该州列出时，ID 会正确显示，因此它们就在那里。但是由于某种原因，它们没有作为道具从 App.js 正确传递到 ListItem.js。当我向列表中添加新项目时，我会收到“警告：列表中的每个孩子都应该有一个唯一的“键”道具。”

知道为什么会发生此错误吗？

【问题讨论】：

在地图中添加key..<ListItem key={i.id} ...>
啊啊啊，所以我不需要把key作为ListItem组件中li元素的属性，我可以直接把key放在App.js文件中的组件调用上就可以了会知道应该将其添加到以这种方式创建的每个 li 中吗？
有点。 li 不是反应所抱怨的列表中的孩子。需要密钥的是ListItem。
好吧，这很有道理。感谢您为我解决这个问题！

标签： reactjs

【解决方案1】：

React 使用键来唯一标识列表中的兄弟姐妹。为什么你可能会问？因为 React 将尝试仅使用已更改/添加/删除的元素尽可能少地更新 DOM。在React documentation 中查看更多详细信息。

因此，无论何时使用地图，请务必添加键：

items.map(i => <ListItem key={i.id} />);

实现 ListItem 时无需添加键。

【讨论】：