警告：列表中的每个孩子都应该有一个唯一的“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) => (&nbsp; &nbsp; <Column key={count} details={this.state.columns[key]} />))

Answer 2

从反应文档：键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以使元素具有稳定的身份因此，本质上，如果您将数组映射到组件，则每个组件（映射的组件）的唯一键将确保仅在必要时重新渲染这些组件。