Question

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

当遍历创建每个列表项的状态时，我试图将每个项目的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。当我将新项目添加到列表中时，我会收到“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”

任何想法为什么会发生此错误？

Answer 1

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

因此，每当您使用地图时，请确保添加键：

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

实现ListItem时无需添加键。

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

1 个答案: