未将Javascript对象id字段传递给事件处理程序

我有一个react应用程序，包含两个组件，Counters和Counter，其中Counters组件的state对象包含一个对象数组，每个对象表示一个计数器

在计数器组件的实际jsx代码中，计数器数组中的项目被呈现，每个项目都包含一个删除按钮，每个计数器都可以被删除。现在，我有一个箭头函数来处理delete，它被设置为呈现的计数器标记中的一个属性。在计数器组件中，delete按钮中有一个onCLick事件，它将被单击的计数器的id作为参数

由于某些原因，删除不起作用，当我将已单击计数器的id记录到控制台日志中时，将打印undefined是什么原因导致无法从计数器组件读取id属性？

相关代码如下：

class Counter extends Component {
  state = {
    value: this.props.value
  };


  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children}
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement({ id: 1 })}
          className="btn btn-sercondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleDelete = counterId => {
    console.log("Event Handler Called", counterId);
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            value={counter.value}
          />
        ))}
      </div>
    );
  }
}

计数器组件：

class Counter extends Component {
  state = {
    value: this.props.value
  };


  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children}
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement({ id: 1 })}
          className="btn btn-sercondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleDelete = counterId => {
    console.log("Event Handler Called", counterId);
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            value={counter.value}
          />
        ))}
      </div>
    );
  }
}

类计数器扩展组件{
状态={
值：this.props.value
};
render（）{
console.log（this.props）；
返回(
{this.props.children}
{this.formatCount（）}
this.handleIncrement（{id:1}）}
className=“btn btn SER辅助btn sm”
>
增量
this.props.onDelete（this.props.id）}
className=“btn btn危险btn sm-2”
>
删除
);
}

计数器组件：

class Counter extends Component {
  state = {
    value: this.props.value
  };


  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children}
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement({ id: 1 })}
          className="btn btn-sercondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleDelete = counterId => {
    console.log("Event Handler Called", counterId);
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            value={counter.value}
          />
        ))}
      </div>
    );
  }
}

从“/Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：4}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}
]
};
handleDelete=计数器ID=>{
log（“调用的事件处理程序”，计数器ID）；
const counters=this.state.counters.filter（c=>c.id！==counterId）；
this.setState（{counters}）；
};
render（）{
返回(
{this.state.counters.map（counter=>(
))}
);
}
}

您有一个输入错误

---

您应该在组件类的delete方法中使用

this.props.key

而不是

this.props.id
您需要在组件
Couters
的呈现函数中将prop
id
传递给
Couters
，因为按钮需要它
this.props.onDelete（this.props.id）}

看这里

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



或者，您也可以这样做

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

this.handleDelete（counter.id）}
value={counter.value}
/>