Поле идентификатора объекта Javascript не передается в обработчик событий

Question

У меня есть приложение реагирования, содержащее два компонента, Счетчики и Счетчик, где объект состояния компонента Счетчики содержит массив объектов, каждый из которых представляет Счетчик.

В фактическом jsx-коде для компонента Counters элементы в массиве counters отображаются с каждым, содержащим кнопку удаления, где каждый отдельный счетчик может быть удален. Прямо сейчас, у меня есть функция стрелки для обработкиdelete, которая установлена ​​как свойство в отображаемых тегах Counter.Внутри компонента Counter в кнопке удаления есть событие onCLick, которое в качестве параметра принимает идентификатор счетчика, по которому щелкнули.

По какой-то причине удаление не работает, и когда я сохраняю консоль в журнале, на ID счетчика, по которому щелкнули, выводится значение undefined. Что может быть причиной того, что свойство id не будет считано из компонента Counter?

Соответствующий код приведен ниже:

Компонент счетчика:

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>
    );
  }
}

Answer 1

Вам необходимо передать prop id в Couter в функции рендеринга компонента Couters, так как кнопка нужна <button onClick={() => 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}
/>

Answer 2

У вас есть опечатка.

Вы должны использовать this.props.key внутри метода delete в классе Component вместо this.props.id.