为什么我会收到一条警告，上面写着" each child in a list should have a unique key prop"，但我已经有一个子组件的唯一键道具

Question

我是在线课程中反应和执行代码的新手。我在列表中对每个孩子的警告应该具有独特的密钥道具。但是，儿童组件已经有一个唯一的密钥道具。

该程序应增加对象值的值，在这种情况下，当按下"增量"按钮时，值为counter。

我尝试将(参数，索引(添加到我正在使用的地图函数中，但我会遇到一个错误的错误。

//Parent Component
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 9 },
     ]
  };
  handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counters };
    counters[index].value++;
    this.setState({ counters });
  };

   render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onIncrement={this.handleIncrement}
          />
        ))}
      </div>
    );
  }
}
export default Counters;
//Child Component
import React, { Component } from "react";
class Counter extends Component {
   return (
      <div>
        <button
          onClick={() => this.props.onIncrement(this.props.counter)}
        >
          Increment
       </button>
}
export default Counter;

Answer 1

用以下方式替换渲染部分：

 render() {
    const { counters } = this.state;
    return (
      <div>
        {counters.map(counter => {
            const counterKey = `counter-${counter.id}`;
            return (
                <Counter
                  key={counterKey}
                  onIncrement={this.handleIncrement}
                />
            )})
        }
      </div>
    );
  }