警告：列表中的每个孩子都应该有一个唯一的“key”道具。

Question

我正在使用 ReactJS 构建看板应用程序，用户可以在其中将“卡片”添加到三个不同的“列”（Todos、Onprogress 和 Done）。我遇到的问题是，应该在卡片中显示的内容没有按原样显示，尽管我的状态返回它的对象很好（当我 console.log 一切时）。我认为问题在于我将一个对象推送到一个数组中，然后将其作为值添加到我的一个键状态中，因此当我使用 props 传递它时，我的数据没有被正确读取。我将在下面分享我所有的代码库。这是我的应用程序组件：import React, { Component } from 'react';  import Column from './Column';  import AddCardForm from './AddCardForm';  import './App.css';class App extends Component {    constructor(props) {      super(props)      this.state = {        columns: [          {            name: 'Todos',            cards: []          },          {            name: 'Onprogress',            cards: []          },          {            name: 'Done',            cards: []          },         ]       };    };    // componentDidMount() {    //   const { coldata } = this.state.columns    //   console.log(coldata);    //   // this.ref = base.syncState();    // }    addCard = (card, otherStatus) => {      console.log("Adding a Card");      const cards = { ...this.state.columns.cards };      cards[`card`] = card;            let todosCards = []      let onprogressCards = []      let doneCards = []            Object.values(otherStatus).map(function(value) {        if (value.includes('Onprogress') && value.includes('Done')) {              todosCards.push(cards)        } else if (value.includes('Todos') && value.includes('Done')) {              onprogressCards.push(cards);        } else if (value.includes('Todos') && value.includes('Onprogress')) {              doneCards.push(cards);        }        return(todosCards || onprogressCards || doneCards);        });      console.log(todosCards);      console.log(onprogressCards);      console.log(doneCards);        this.setState({          columns: [            {               name: 'Todos',              cards: todosCards            },            {               name: 'Onprogress',              cards: onprogressCards            },

Answer 1

在任何使用循环构建 React 组件的地方，您都必须添加 propkey并传递一个唯一值。

您可以重新定义您的map调用以包含这样的索引：

Object.keys(this.state.columns).map((count, key) => (

    <Column key={count} details={this.state.columns[key]} />

))

Answer 2

从反应文档：

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以使元素具有稳定的身份

因此，本质上，如果您将数组映射到组件，则每个组件（映射的组件）的唯一键将确保仅在必要时重新渲染这些组件。