如何將唯一 id 作為道具傳遞給另一個組件

Question

我正在創建一個待辦事項來練習某些概念，並且我目前正在嘗試將我的列表項作為一個單獨的組件，以幫助使狀態迭代更清晰，並為每個項目添加復選框和添加/刪除按鈕列表。

在迭代狀態以創建每個列表項時，我試圖將每個項的 id 傳遞給列表，以便根據 react 的要求為每個 li 元素提供一個唯一的 id。 我的代碼目前如下：

應用程序.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>
  );
}

列表項.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 文檔中查看更多詳細信息。

因此，無論何時使用 map，請確保添加鍵：

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

實現 ListItem 時無需添加鍵。