Buduję komponent React, który akceptuje źródło danych JSON i tworzy sortowalną tabelę.
Każdy z wierszy danych dynamicznych ma przypisany unikalny klucz, ale wciąż pojawia się błąd:

Każde dziecko w tablicy powinno mieć unikalny „klucz” rekwizyt.
Sprawdź metodę renderowania TableComponent.

Moja TableComponentmetoda renderowania zwraca:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

TableHeaderSkładnikiem jest jednorzędowe i również posiada unikalny klucz przypisany do niego.

Każdy roww rowszbudowany jest ze składnika z unikalnym kluczem:

<TableRowItem key={item.id} data={item} columns={columnNames}/>

I TableRowItemwygląda to tak:

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c) {
          return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

Co powoduje unikalny błąd klucza prop?

Powinieneś dodać klucz do każdego dziecka, a także do każdego elementu wewnątrz dzieci .

W ten sposób React może obsłużyć minimalną zmianę DOM.

W twoim kodzie każde z nich <TableRowItem key={item.id} data={item} columns={columnNames}/>próbuje wyrenderować niektóre dzieci bez klucza.

Sprawdź ten przykład .

Spróbuj usunąć element key={i}z <b></b>elementu div (i sprawdź konsolę).

W przykładzie, jeśli nie damy klucza do <b>elementu i chcemy zaktualizować tylko ten element object.city, React musi ponownie renderować cały wiersz względem samego elementu.

Oto kod:

var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

var Hello = React.createClass({

    render: function() {

      var _data = this.props.info;
      console.log(_data);
      return(
        <div>
            {_data.map(function(object, i){
               return <div className={"row"} key={i}> 
                          {[ object.name ,
                             // remove the key
                             <b className="fosfo" key={i}> {object.city} </b> , 
                             object.age
                          ]}
                      </div>; 
             })}
        </div>
       );
    }
});

React.render(<Hello info={data} />, document.body);

Odpowiedź wysłana przez @Chris na dole jest o wiele bardziej szczegółowa niż ta odpowiedź. Proszę spojrzeć na https://stackoverflow.com/a/43892905/2325522

Reaguj dokumentację dotyczącą znaczenia kluczy w uzgodnieniu: Klucze

Zachowaj ostrożność podczas iteracji po tablicach !!

Jest powszechnym błędnym przekonaniem, że użycie indeksu elementu w tablicy jest akceptowalnym sposobem tłumienia błędu, który prawdopodobnie znasz:

Each child in an array should have a unique "key" prop.

Jednak w wielu przypadkach tak nie jest! Jest to anty-wzór, który w niektórych sytuacjach może prowadzić do niepożądanych zachowań .

Zrozumienie keyprop

React używa keyrekwizytu, aby zrozumieć relację elementu do elementu DOM, która jest następnie wykorzystywana w procesie uzgadniania . Dlatego bardzo ważne jest, aby klucz zawsze pozostawał unikalny , w przeciwnym razie istnieje duża szansa, że ​​React pomieszać elementy i zmutować niewłaściwy. Ważne jest również, aby te klucze pozostały statyczne podczas wszystkich renderowań w celu zachowania najlepszej wydajności.

Biorąc to pod uwagę, nie zawsze trzeba stosować powyższe, pod warunkiem, że wiadomo, że tablica jest całkowicie statyczna. Jednak w miarę możliwości zaleca się stosowanie najlepszych praktyk.

Deweloper React powiedział w tym numerze GitHub :

• kluczem nie jest tak naprawdę wydajność, lecz tożsamość (co z kolei prowadzi do lepszej wydajności). losowo przypisywane i zmieniające się wartości nie są tożsamością
• Nie możemy realistycznie dostarczyć kluczy [automatycznie] bez wiedzy o sposobie modelowania danych. Sugerowałbym może użycie funkcji haszującej, jeśli nie masz identyfikatorów
• Mamy już klucze wewnętrzne, gdy korzystamy z tablic, ale są one indeksem w tablicy. Po wstawieniu nowego elementu klucze są nieprawidłowe.

Krótko mówiąc, keypowinno być:

• Unikalny - klucz nie może być identyczny z kluczem elementu rodzeństwa .
• Statyczny - Klucz nigdy nie powinien zmieniać się między renderami.

Korzystanie z keyprop

Zgodnie z powyższym wyjaśnieniem dokładnie przestudiuj poniższe próbki i spróbuj wdrożyć, w miarę możliwości, zalecane podejście.

Źle (potencjalnie)

<tbody>
    {rows.map((row, i) => {
        return <ObjectRow key={i} />;
    })}
</tbody>

Jest to prawdopodobnie najczęstszy błąd występujący podczas iteracji nad tablicą w React. Takie podejście nie jest technicznie „złe” , jest po prostu… „niebezpieczne”, jeśli nie wiesz, co robisz. Jeśli iterujesz przez tablicę statyczną, jest to całkowicie poprawne podejście (np. Tablica linków w menu nawigacyjnym). Jeśli jednak dodajesz, usuwasz, zmieniasz kolejność lub filtrujesz elementy, musisz zachować ostrożność. Spójrz na to szczegółowe wyjaśnienie w oficjalnej dokumentacji.

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: ["Item 1"]
    }
  }
  
  click = () => {
    this.setState({
      arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr),
    });
  }
  
  render() {
    return(
      <div>
        <button onClick={this.click}>Add</button>
        <ul>
          {this.state.arr.map(
            (item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item>
          )}
        </ul>
      </div>
    );
  }
}

const Item = (props) => {
  return (
    <li>
      <label>{props.children}</label>
      <input value={props.text} />
    </li>
  );
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

W tym fragmencie używamy niestatycznej tablicy i nie ograniczamy się do używania go jako stosu. To niebezpieczne podejście (zobaczysz dlaczego). Zauważ, jak dodając elementy na początku tablicy (w zasadzie cofnij przesunięcie), wartość każdego z nich <input>pozostaje na miejscu. Dlaczego? Ponieważ keynie jednoznacznie identyfikuje każdy element.

Innymi słowy, na początku Item 1ma key={0}. Kiedy dodamy drugi element, najwyższy element staje się Item 2, a następnie Item 1jako drugi element. Jednak teraz Item 1ma key={1}i key={0}już nie ma. Zamiast tego Item 2teraz ma key={0}!!

React uważa, że <input>elementy się nie zmieniły, ponieważ Itemklawisz z 0jest zawsze na górze!

Dlaczego więc takie podejście jest czasami złe?

Takie podejście jest ryzykowne tylko wtedy, gdy tablica jest w jakiś sposób filtrowana, przestawiana lub elementy są dodawane / usuwane. Jeśli zawsze jest statyczny, to jest całkowicie bezpieczny w użyciu. Na przykład menu nawigacyjne, takie jak, ["Home", "Products", "Contact us"]może być bezpiecznie iterowane za pomocą tej metody, ponieważ prawdopodobnie nigdy nie dodasz nowych łączy ani nie zmienisz ich położenia.

W skrócie, oto kiedy możesz bezpiecznie używać indeksu jakokey :

• Tablica jest statyczna i nigdy się nie zmieni.
• Tablica nigdy nie jest filtrowana (wyświetla podzbiór tablicy).
• Tablica nigdy nie jest zmieniana.
• Tablica jest używana jako stos lub LIFO (ostatnie wejście, pierwsze wyjście). Innymi słowy, dodawanie można wykonać tylko na końcu tablicy (tj. Push) i tylko ostatni element można usunąć (np. Pop).

Gdybyśmy zamiast tego we fragmencie powyżej przesunęli dodany element na koniec tablicy, kolejność dla każdego istniejącego elementu zawsze byłaby poprawna.

Bardzo źle

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={Math.random()} />;
    })}
</tbody>

Chociaż takie podejście prawdopodobnie zagwarantuje unikalność kluczy, zawsze wymusi reakcję w celu ponownego renderowania każdego elementu na liście, nawet jeśli nie jest to wymagane. To bardzo złe rozwiązanie, ponieważ ma duży wpływ na wydajność. Nie wspominając już o tym, że nie można wykluczyć możliwości kolizji klucza w przypadku, Math.random()gdy dwukrotnie otrzyma ten sam numer.

Niestabilne klucze (takie jak te produkowane przez Math.random()) spowodują niepotrzebne odtworzenie wielu instancji komponentów i węzłów DOM, co może spowodować pogorszenie wydajności i utratę stanu komponentów potomnych.

Bardzo dobre

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={row.uniqueId} />;
    })}
</tbody>

Jest to prawdopodobnie najlepsze podejście, ponieważ wykorzystuje właściwość, która jest unikalna dla każdego elementu w zestawie danych. Na przykład, jeśli rowszawiera dane pobrane z bazy danych, można użyć klucza podstawowego tabeli ( który zwykle jest liczbą automatycznie zwiększającą wartość ).

Najlepszym sposobem na wybranie klucza jest użycie ciągu, który jednoznacznie identyfikuje element listy wśród jego rodzeństwa. Najczęściej używasz identyfikatorów z danych jako kluczy

Dobrze

componentWillMount() {
  let rows = this.props.rows.map(item => { 
    return {uid: SomeLibrary.generateUniqueID(), value: item};
  });
}

...

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={row.uid} />;
    })}
</tbody>

To również dobre podejście. Jeśli zestaw danych nie zawiera żadnych danych gwarantujących unikalność ( np. Tablicę dowolnych liczb ), istnieje ryzyko kolizji klucza. W takich przypadkach najlepiej jest ręcznie wygenerować unikalny identyfikator dla każdego elementu w zestawie danych przed iteracją. Najlepiej podczas montowania komponentu lub odbierania zestawu danych ( np. Z propslub z wywołania asynchronicznego interfejsu API ), aby zrobić to tylko raz , a nie za każdym razem, gdy komponent jest ponownie renderowany. Istnieje już kilka bibliotek, które mogą dostarczyć takie klucze. Oto jeden przykład: indeks klucza reakcji .

To może komuś pomóc, ale może to być szybkie odniesienie. Jest to również podobne do wszystkich odpowiedzi przedstawionych powyżej.

Mam wiele lokalizacji, które generują listę przy użyciu poniższej struktury:

return (
    {myList.map(item => (
       <>
          <div class="some class"> 
             {item.someProperty} 
              ....
          </div>
       </>
     )}
 )

Po krótkiej próbie i błędzie (i niektórych frustracjach) dodanie właściwości klucza do najbardziej zewnętrznego bloku rozwiązało to. Zauważ też, że tag <> jest teraz zastąpiony tagiem teraz.

return (

    {myList.map((item, index) => (
       <div key={index}>
          <div class="some class"> 
             {item.someProperty} 
              ....
          </div>
       </div>
     )}
 )

Oczywiście naiwnie używam indeksu iteracji (indeksu), aby wypełnić kluczową wartość w powyższym przykładzie. Idealnie byłoby użyć czegoś, co jest unikalne dla elementu listy.

Ostrzeżenie: każde dziecko w tablicy lub iteratorze powinno mieć unikalny „klucz” prop.

To ostrzeżenie, ponieważ dla elementów tablicy, nad którymi będziemy się powtarzać, będzie potrzebne unikalne podobieństwo.

React obsługuje iteracyjne renderowanie komponentów jako tablice.

Lepszym sposobem na rozwiązanie tego problemu jest zapewnienie indeksu elementów tablicy, które będą iterowane. Na przykład:

class UsersState extends Component
    {
        state = {
            users: [
                {name:"shashank", age:20},
                {name:"vardan", age:30},
                {name:"somya", age:40}
            ]
        }
    render()
        {
            return(
                    <div>
                        {
                            this.state.users.map((user, index)=>{
                                return <UserState key={index} age={user.age}>{user.name}</UserState>
                            })
                        }
                    </div>
                )
        }

indeks jest React wbudowane rekwizyty.

Po prostu dodaj unikalny klucz do swoich komponentów

data.map((marker)=>{
    return(
        <YourComponents 
            key={data.id}     // <----- unique key
        />
    );
})

Sprawdź: klucz = undef !!!

Otrzymałeś również wiadomość ostrzegającą:

Each child in a list should have a unique "key" prop.

jeśli kod jest kompletny, ale jeśli jest włączony

<ObjectRow key={someValue} />

someValue jest niezdefiniowany !!! Najpierw sprawdź to. Możesz zaoszczędzić godziny.

Najlepsze rozwiązanie zdefiniowania unikalnego klucza w reakcji: w mapie zainicjowałeś nazwę posta, następnie klucz zdefiniuj kluczem {post.id} lub w moim kodzie widzisz definiuję element nazwy, a następnie definiuję klucz według klucza = {item.id }:

<div className="container">
                {posts.map(item =>(

                    <div className="card border-primary mb-3" key={item.id}>
                        <div className="card-header">{item.name}</div>
                    <div className="card-body" >
                <h4 className="card-title">{item.username}</h4>
                <p className="card-text">{item.email}</p>
                    </div>
                  </div>
                ))}
            </div>

To ostrzeżenie, ale rozwiązanie tego problemu sprawi, że reakcje będą znacznie SZYBSZE ,

Jest tak, ponieważ Reactmusi jednoznacznie identyfikować każdą pozycję na liście. Powiedzmy, że jeśli stan elementu z tej listy zmienia się w Reactach, Virtual DOMto React musi dowiedzieć się, który element został zmieniony i gdzie w DOM musi się zmienić, aby DOM przeglądarki był zsynchronizowany z DOMem Reactów wirtualnym.

Jako rozwiązanie wystarczy wprowadzić keyatrybut do każdego litagu. To keypowinno być unikalną wartość dla każdego elementu.

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c, i) {
          return <td key={i}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

To rozwiąże problem.

Natrafiłem na ten komunikat o błędzie, ponieważ w <></>zamian za niektóre elementy w tablicy nulltrzeba było zwrócić.

Naprawiłem to za pomocą Guid dla każdego takiego klucza: Generowanie Guid:

guid() {
    return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' +
        this.s4() + '-' + this.s4() + this.s4() + this.s4();
}

s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
}

A następnie przypisując tę ​​wartość do znaczników:

{this.state.markers.map(marker => (
              <MapView.Marker
                  key={this.guid()}
                  coordinate={marker.coordinates}
                  title={marker.title}
              />
          ))}

Zasadniczo nie należy używać indeksu tablicy jako unikalnego klucza. Raczej można użyć setTimeout(() => Date.now(),0), aby ustawić unikalny klucz lub uniquid UUID lub w jakikolwiek inny sposób, który wygeneruje unikatowy identyfikator, ale nie indeks tablicy jako unikalnego identyfikatora.