解決React報錯Encountered?two?children?with?the?same?key

更新時間：2022年12月02日 14:10:12 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了React報錯Encountered?two?children?with?the?same?key解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當我們從map()方法返回的兩個或兩個以上的元素具有相同的key屬性時，會產(chǎn)生"Encountered two children with the same key"錯誤。為了解決該錯誤，為每個元素的key屬性提供獨一無二的值，或者使用索引參數(shù)。

這里有個例子來展示錯誤是如何發(fā)生的。

// App.js
const App = () => {
  // ??? name property is not a unique identifier
  const people = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Alice'},
  ];
  /**
   * ?? Encountered two children with the same key, `Alice`.
   *  Keys should be unique so that components maintain their identity across updates.
   *  Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
   */
  return (
    <div>
      {people.map(person => {
        return (
          <div key={person.name}>
            <h2>{person.id}</h2>
            <h2>{person.name}</h2>
          </div>
        );
      })}
    </div>
  );
};
export default App;

上述代碼片段的問題在于，我們在每個對象上使用name屬性作為key屬性，但是name屬性在整個對象中不是獨一無二的。

index

解決該問題的一種方式是使用索引。它是傳遞給map方法的第二個參數(shù)。

const App = () => {
  const people = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Alice'},
  ];
  // ??? now using index for key
  return (
    <div>
      {people.map((person, index) => {
        return (
          <div key={index}>
            <h2>{person.id}</h2>
            <h2>{person.name}</h2>
          </div>
        );
      })}
    </div>
  );
};
export default App;

我們傳遞給Array.map方法的函數(shù)被調(diào)用，其中包含了數(shù)組中的每個元素和正在處理的當前元素的索引。

索引保證是唯一的，但是用它來做key屬性并不是一個最好的做法。因為它不穩(wěn)定，在渲染期間會發(fā)生變化。

唯一標識

更好的解決方案是，使用一個能唯一標識數(shù)組中每個元素的值。

在上面的例子中，我們可以使用對象上的id屬性，因為每個id屬性保證是唯一的。

// App.js
const App = () => {
  const people = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Alice'},
  ];
  // ? now using the id for the key prop
  return (
    <div>
      {people.map(person => {
        return (
          <div key={person.id}>
            <h2>{person.id}</h2>
            <h2>{person.name}</h2>
          </div>
        );
      })}
    </div>
  );
};
export default App;

使用id作為key屬性好多了。因為我們保證了對象id屬性為1時，name屬性總是等于Alice。

React使用我們傳遞給key屬性的值是出于性能方面的考慮，以確保它只更新在渲染期間變化的列表元素。

當數(shù)組中每個元素都擁有獨一無二的key時，React會更容易確定哪些列表元素發(fā)生了變化。

你可以使用index作為key屬性。然而，這可能會導致React在幕后做更多的工作，而不是像獨一無二的id屬性那樣穩(wěn)定。

盡管如此，除非你在渲染有成千上萬個元素的數(shù)組，否則你很有可能不會注意到使用索引和唯一標識符之間有什么區(qū)別。

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯Encountered two children with the same key的詳細內(nèi)容，更多關(guān)于React報錯same key的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: