解決React報(bào)錯(cuò)Encountered?two?children?with?the?same?key

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

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

總覽

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

這里有個(gè)例子來(lái)展示錯(cuò)誤是如何發(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;

上述代碼片段的問(wèn)題在于，我們?cè)诿總€(gè)對(duì)象上使用name屬性作為key屬性，但是name屬性在整個(gè)對(duì)象中不是獨(dú)一無(wú)二的。

index

解決該問(wèn)題的一種方式是使用索引。它是傳遞給map方法的第二個(gè)參數(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ù)組中的每個(gè)元素和正在處理的當(dāng)前元素的索引。

索引保證是唯一的，但是用它來(lái)做key屬性并不是一個(gè)最好的做法。因?yàn)樗环€(wěn)定，在渲染期間會(huì)發(fā)生變化。

唯一標(biāo)識(shí)

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

在上面的例子中，我們可以使用對(duì)象上的id屬性，因?yàn)槊總€(gè)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屬性好多了。因?yàn)槲覀儽ＷC了對(duì)象id屬性為1時(shí)，name屬性總是等于Alice。

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

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

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

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

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

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

您可能感興趣的文章: