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

我得到了这个错误，我不确定我找到的其他解决方案是否适用。我认为发生这种错误是因为我在映射时使用了prop并从“results”中提取了第一个数组，但我不确定是否有更好的方法来实现这一点。请让我知道这方面更好的做法是什么。我目前正在尝试测试我的搜索框，但由于此错误，我无法测试

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"
                }
            ]
        }   
    ]

import React，{Component}来自'React'；
从“./components/CardList”导入卡片列表；
导入“/App.css”；
从“./components/SearchBox”导入SearchBox；
从“/movies”导入{movies}；
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
电影:电影,，
搜索字段：“”
}
}
onSearchChange（事件）{
日志（event.target.value）；
}
render（）{
返回(
现在播放：
);
}
}
导出默认应用程序；
从“React”导入React；
从“./Card/Card”导入卡片；
const CardList=（{movies}）=>{
const results=movies[0]。结果；
返回(
{
results.map（（用户，i）=>{
返回(
);
})
}
);
}
导出默认卡片列表；
导出常量电影=[
{
结果:[
{
计票：726，
身份证号码：439079，
视频：错，
平均票数：5.9，
标题：“修女”，
人气：164.352，
海报路径：“/sFC1ElvoKGdHJIWRpNB3xWJ9lJA.jpg”，
原文：“en”，
原名：“修女”，
类型识别码：[
27,
9648,
53
],
背景_路径：“/fgshxz21b27hooqbiw9l6ywcm7.jpg”，
成人：错，
概述："当罗马尼亚一座修道院的年轻修女自杀时，梵蒂冈派了一位过去闹鬼的牧师和一位即将宣誓的见习者去调查。他们一起揭开了该教团的邪恶秘密。他们不仅冒着生命危险，还冒着信仰和灵魂的危险，面对着一股邪恶的力量《魔术师2》中第一次恐吓观众的同一个恶魔修女的故事，修道院变成了活人和该死的人之间可怕的战场，
发布日期：“2018-09-05”
},  
{
计票：163，
id:489999，
视频：错，
平均投票数：7.6，
标题：“搜索”，
人气：33.883，
海报路径：“/9N0T3BaHZNdUCcMZQIM3yMUFwEh.jpg”，
原文：“en”，
原始标题：“搜索”，
类型识别码：[
18,
53
],
背景图片路径：“/QU2IPNFYDZTLUOYCKPPTXP1VNV.jpg”，
成人：错，
概述：“在他16岁的女儿失踪后，一位绝望的父亲闯入她的笔记本电脑，寻找找到她的线索。这是一部完全在电脑屏幕上展开的惊悚片。”，
发布日期：“2018-08-24”
},
{
计票：349票，
身份证号码：346910，
视频：错，
平均票数：5.5，
标题：“捕食者”，
人气：154.329，
海报路径：“/wMq9kQXTeQCHUZOG4fAe5cAxyUA.jpg”，
原文：“en”，
原名：“捕食者”，
类型识别码：[
27,
878,
28,
35
],
背景_路径：“/f4e0cyocetoeuxvczzv6qarrmdj.jpg”，
成人：错，
概述：“从外层空间到郊区的小镇街道，猎杀行动终于回到了家。现在，宇宙中最致命的猎手比以往任何时候都更强壮、更聪明、更致命，他们用来自其他物种的DNA对自己进行了基因升级。当一个小男孩意外触发他们返回地球时，只有一群衣衫褴褛的前士兵而一个心怀不满的科学老师可以阻止人类的终结。”，
发布日期：“2018-09-13”
}
]
}   
]

首先，这不是错误，而是警告

其次，在循环中呈现

Card

组件。在这种情况下，应该为每个组件实例提供唯一的

key

属性

例如：

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

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

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

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

results.map（（用户，i）=>{
返回(
);
})

尝试为列表项分配一个键，然后它将修复缺少键的问题

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

results.map（（用户，i）=>{
返回(
);
})

据报道，原因是他们说：

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识

例如：

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

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

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

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

const number=[1,2,3,4,5]；
const listItems=numbers.map（（number）=>

{number}

);

选择键的最佳方法是使用一个字符串，该字符串在其同级中唯一标识列表项。通常情况下，您会使用数据中的ID作为键：

例如：

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

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

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

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

const todoItems=todos.map（（todo）=>

{todo.text}

);

<