Javascript Can'；无法在中找到ID

这是我学习react的第一天，我遇到了一个问题（如下所示）：

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
value:this.props.value，
};
handleIncrement=（）=>{
log（“单击！”）；
this.setState（{value:this.state.value+1}）；
};
handleDecrement=（）=>{
log（“单击！”）；
if（this.state.value！==0）{
this.setState（{value:this.state.value-1}）；
}
};
render（）{
返回(
{this.formatCount（）}
this.handleIncrement（{id:1}）}
className=“btn btn深色”
>
+
this.handleDecrement（{id:1}）}
className={this.isLessThanZero（）}
>
-
this.props.onDelete（this.props.id）}
className=“btn btn危险m-2”
>
删除
);
}
isLessThanZero（）{
让class=“btn btn暗”；
classes+=this.state.value==0？“已禁用”：“；
返回类；
}
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.state.value==0？“警告”：“主要”；
返回类；
}
formatCount（）{
设{value}=this.state；
返回值===0？零：值；
}
}
导出默认计数器；

这是一个计数器组件，只响应按钮。我将这些包含在另一个组件中：

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
    ],
  };
  handleDelete = (counterId) => {
    console.log("Event detected! Delete", counterId);
  };
  render() {
    return (
      <div className="cont">
        {this.state.counters.map((counter) => (
          <Counter
            value={counter.value}
            key={counter.id}
            onDelete={this.handleDelete}
          ></Counter>
        ))}
      </div>
    );
  }
}

export default Counters;

import React，{Component}来自“React”；
从“/Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}，
],
};
handleDelete=（计数器ID）=>{
日志（“检测到事件！删除”，计数器ID）；
};
render（）{
返回(
{this.state.counters.map（（counter）=>(
))}
);
}
}
导出默认计数器；

在

handleDelete

函数中，调用时，

计数器ID的定义将被取消。当我签入ReactComponents Chrome扩展时，我看到没有任何ID：


为什么会发生这种情况？
问题是您没有通过
此.handleDelete的
计数器。您需要显式地传递它

       <Counter
            value={counter.value}
            key={counter.id}
            onDelete={() => this.handleDelete(counter.id)}
       />

this.handleDelete（counter.id）}
/>

在上面的代码片段中，我将向
计数器
组件传递一个新函数，该函数仅使用相应组件的
计数器.id
调用
this.handleDelete
。
您没有将
id
道具传递给
计数器
组件。您可以将完整计数器对象传递给handleDelete，并从中访问
id
：
onDelete={（）=>this.handleDelete（计数器）}
和
handleDelete=（counter）=>{
const id=counter.id..`检查一下，谢谢大家的帮助！
       <Counter
            value={counter.value}
            key={counter.id}
            onDelete={() => this.handleDelete(counter.id)}
       />