Reactjs 为什么我会收到一条警告，上面写着；列表中的每个子项都应该有一个唯一的关键道具"；但是我已经为子组件提供了一个唯一的关键道具

我是一个新的反应和做一个在线课程的代码。我得到一个警告，名单上的每个孩子都应该有一个唯一的钥匙道具。但是，子组件已经具有唯一的关键点道具

当按下递增按钮时，程序应将对象值（在本例中为counter.value）的值增加1，但我得到一个键错误

我已经尝试将（参数、索引）添加到我正在使用的map函数中，但我得到一个错误，即未定义子组件

//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;

//父组件
从“React”导入React，{Component}；
从“/Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：9}，
]
};
handleIncrement=计数器=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}；
计数器[索引]。值++；
this.setState（{counters}）；
};
render（）{
返回(
{this.state.counters.map（counter=>(
))}
);
}
}
导出默认计数器；
//子组件
从“React”导入React，{Component}；
类计数器扩展组件{
返回(
this.props.onIncrement（this.props.counter）}
>
增量
}
导出默认计数器；

将渲染部分替换为以下内容：

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

render（）{
const{counters}=this.state；
返回(
{counters.map（计数器=>{
const counterKey=`counter-${counter.id}`；
返回(
)})
}
);
}

您有一个语法错误，缺少一些卷曲的分支-->

key={counter.id}

Jayce444，您可以在答案部分写入它。为什么不使用

key={counter.id}

？我重新键入了handleIncrement方法，现在它可以工作了。我不确定更改了什么。