Buduję Areact Application.i mam tablicę stanową, która trzyma tablicę blogów. Renderuję każdego bloga za pomocą komponentu Blogdisplay. Poniżej znajduje się mój kod:

render() {
        for( var i = 0;i < this.state.blogData.length;i++){
            blogDataToRender.push(<BlogDisplay blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>);
        }
        return (
            <div>
                {blogDataToRender}
            </div>
        );
    }

Mam takie ostrzeżenie:

index.js:5279 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `BloggerHome`. See https://facebook.github.io/react/docs/lists-and-keys.html#keys for more information.
in BlogDisplay (created by BloggerHome)
in BloggerHome (created by Blogger)
in div (created by Blogger)
in div (created by Blogger)
in Blogger

Czy moje modelowanie jest poprawne? Jak mogę to poprawić?

Wielkie dzięki.

0
Varbi 25 czerwiec 2017, 08:57

4 odpowiedzi

Najlepsza odpowiedź

Musisz dodać key dla każdego komponentu {X1}}:

for( var i = 0;i < this.state.blogData.length;i++){
    blogDataToRender.push(<BlogDisplay key={i} blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>);
}

key jest ważne dla elementów dziecka w tablicy. Ponieważ gdy jeden z tych elementów dziecka jest w stanie operacji, reaguje wymaga key, aby określić, który jest obsługiwany. Ponadto, gdy dane tablicy źródłowej zostaną zmienione, reaguje wymaga key, aby sprawdzić różę komponentów.

W przypadku dogłębnej wyjaśnienia, dlaczego klucze są konieczne, zapoznaj się z oficjalnym Dokument.

Jaki powinien być wartość key dla każdego elementu dziecka?

Zgodnie z powyższym dokumentem:

Kluczem musi być unikalny wśród rodzeństwa, a nie na całym świecie.

Jest też najlepszym wyborem, blogData[i].id jest to wyjątkowy identyfikator w danych źródłowych. Indeksy, jak w powyższym przykładzie nie jest zalecany, jeśli składniki dzieci zmieniłyby kolejność (problem z wydajnością).

2
shaochuancs 25 czerwiec 2017, 06:26

Aby szybko odpowiedzieć na twoje pytanie, musisz przeczytać błąd i naprawić go! Dodaj wartość kluczową Unikalną do każdego elementu jak więc:

...
  for( var i = 0;i < this.state.blogData.length;i++){
    blogDataToRender.push(
      <BlogDisplay
        key={this.state.blogData[i].id}
        blogData={this.state.blogData[i]}
        onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView}
     />
    );
  }
...

W tym przypadku zakładam, że każdy z twoich wpisów na blogach ma unikalny identyfikator, co trzeba zdawać sobie sprawę, jest to, że wartość key musi być unikalna, a nie w zależności od położenia tego elementu wewnątrz szyk. Za każdym razem, gdy renderujesz tych elementów, które kluczowe muszą być takie same, wartość ta jest używana przez reagowanie na optymalizację renderowania renderowania i uniknięcia renderowania przedmiotów, które nie zmieniły. Jeśli chcesz zrozumieć, dlaczego jest to konieczne, jest to dobre Link. Następnym razem polecam czytać Dokumenty, ponieważ są bardzo dobrze zrobione i możesz wiele się od niej dowiedzieć.

Teraz sposób, w jaki zrobiłbym to używa map:

...
  const blogDataToRender = this.state.blogData.map(blogData => 
      <BlogDisplay
        key={blogData.id}
        blogData={blogData}
        onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView}
     />
    );
...

Pomaga to czytelności i wykorzystać iterator, dzięki czemu nie musisz śledzić indeksu. Jest szeroko stosowany wzór podczas rozwijania w reakcji.

0
G4bri3l 25 czerwiec 2017, 06:13

Sprawdź odpowiadać Chris 'Odpowiedź na Zrozumienie unikalnych kluczy do dziećmi tablicy w reakcji .js.

Aby to naprawić, musisz ustawić unikalny id dla każdego z elementów, a następnie dodać klucz rekwizytowy do każdego elementu. Możesz przeczytać więcej o tym, jak reaguje używa kluczy do identyfikacji elementów w listach w Oficjalna dokumentacja.

W ten sposób powinien wyglądać metodę render():

render() {
    return (
        <div>
            {this.state.blogData.map((item) => {
                return (<BlogDisplay key={item.id} blogData={item} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView} />)
            })}
        </div>
    );
}
1
Catalin Vasile 25 czerwiec 2017, 06:08

Każdy element w reagowaniu musi mieć unikalny klucz, który reaguje, aby go zidentyfikować. Gdy wystarczy wystarczyć element, reaguj automatycznie przypisuje jeden. Jednak gdy przypisujesz tablicę elementów, każdy element w tej tablicy nie jest domyślnie przypisany klucz, więc musisz. Coś takiego:

blogDataToRender.push(<BlogDisplay key={i} blogData={this.state.blogData[i]} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView}/>);
1
Jayce444 25 czerwiec 2017, 06:07