不知道为什么我会收到“警告：数组或迭代器中的每个子项都应该有一个唯一的“键”道具。”

Question

I am getting this error and I am not sure the other solutions I am finding are applicable. I think this error is occurring because I take the prop and extract the first array from "results" when mapping but I am not sure a better way to achieve this. Please let me know what a better practice for this could be. I am currently trying to test my searchbox but I cannot due to this error.

import React, { Component } from 'react';
import CardList from './components/CardList';
import './App.css';
import SearchBox from './components/SearchBox';
import {movies} from './movies';

class App extends Component {
  constructor() {
    super()
    this.state = {
      movies: movies,
      searchfield: ''
    }
  }

  onSearchChange(event) {
    console.log(event.target.value);
  }

  render() {
    return (
      <div className='tc'>
        <h1 className='f1'>Now Playing: </h1>
        <SearchBox searchChange={this.onSearchChange}/>
        <CardList movies={this.state.movies}/>
      </div>
    );
  }
}

export default App;

import React from 'react';
import Card from './card/Card';

const CardList = ({movies}) => {

    const results = movies[0].results;

    return (
        <div>
            {
                results.map((user, i) => {
                    return (
                        <Card 
                            poster={results[i].poster_path} 
                            title={results[i].title} 
                            summary={results[i].overview} 
                        />
                    );
                })
            }
        </div>
    );
}

export default CardList;

export const movies = [
        {
            results: [
                {
                    vote_count: 726,
                    id: 439079,
                    video: false,
                    vote_average: 5.9,
                    title: "The Nun",
                    popularity: 164.352,
                    poster_path: "/sFC1ElvoKGdHJIWRpNB3xWJ9lJA.jpg",
                    original_language: "en",
                    original_title: "The Nun",
                    genre_ids: [
                        27,
                        9648,
                        53
                    ],
                    backdrop_path: "/fgsHxz21B27hOOqQBiw9L6yWcM7.jpg",
                    adult: false,
                    overview: "When a young nun at a cloistered abbey in Romania takes her own life, a priest with a haunted past and a novitiate on the threshold of her final vows are sent by the Vatican to investigate. Together they uncover the order’s unholy secret. Risking not only their lives but their faith and their very souls, they confront a malevolent force in the form of the same demonic nun that first terrorized audiences in “The Conjuring 2,” as the abbey becomes a horrific battleground between the living and the damned.",
                    release_date: "2018-09-05"
                },  
                {
                    vote_count: 163,
                    id: 489999,
                    video: false,
                    vote_average: 7.6,
                    title: "Searching",
                    popularity: 33.883,
                    poster_path: "/9N0T3BaHZNdUCcMZQIM3yMUFwEh.jpg",
                    original_language: "en",
                    original_title: "Searching",
                    genre_ids: [
                        18,
                        53
                    ],
                    backdrop_path: "/qu2IPnFyDztlUOYhCkPptXP1vnv.jpg",
                    adult: false,
                    overview: "After his 16-year-old daughter goes missing, a desperate father breaks into her laptop to look for clues to find her. A thriller that unfolds entirely on computer screens.",
                    release_date: "2018-08-24"
                },

                {
                    vote_count: 349,
                    id: 346910,
                    video: false,
                    vote_average: 5.5,
                    title: "The Predator",
                    popularity: 154.329,
                    poster_path: "/wMq9kQXTeQCHUZOG4fAe5cAxyUA.jpg",
                    original_language: "en",
                    original_title: "The Predator",
                    genre_ids: [
                        27,
                        878,
                        28,
                        35
                    ],
                    backdrop_path: "/f4E0ocYeToEuXvczZv6QArrMDJ.jpg",
                    adult: false,
                    overview: "From the outer reaches of space to the small-town streets of suburbia, the hunt comes home. Now, the universe’s most lethal hunters are stronger, smarter and deadlier than ever before, having genetically upgraded themselves with DNA from other species. When a young boy accidentally triggers their return to Earth, only a ragtag crew of ex-soldiers and a disgruntled science teacher can prevent the end of the human race.",
                    release_date: "2018-09-13"
                }
            ]
        }   
    ]

Answer 1

Try to assign a key to our list items then it will fix the missing key issue.

results.map((user, i) => {
      return (
          <Card 
             key={results[i].id}
             poster={results[i].poster_path} 
             title={results[i].title} 
             summary={results[i].overview} 
          />
      );
  })

The reason is, according to Official ReactJS Document , they said:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

For example:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

For example:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:

For example:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with the component state. Check out Robin Pokorny's article for an in-depth explanation of the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Hopefully, this information can help you clarify the issue.

Answer 2

First of all, it is not an error, it is warning.

Second, you render Card components in a loop. In this case you should provide the unique key property to each component instance.

For example:

results.map((user, i) => {
    return (
        <Card
            key={i.toString()}
            poster={results[i].poster_path} 
            title={results[i].title} 
            summary={results[i].overview} 
        />
    );
})

Answer 3

Keys help React identify which items have changed, are added, or are removed.

You have to pass key prop to each element:

results.map(result => (
    <Card 
      key={result.id}
      poster={result.poster_path} 
      title={result.title} 
      summary={result.overview} 
    />
));

Learn more about keys: Lists and Keys