Состояние компонента возвращается пустым при возврате в качестве реквизита от другого компонента - PullRequest
Новая
       3

Состояние компонента возвращается пустым при возврате в качестве реквизита от другого компонента

0 голосов
/ 27 ноября 2018

У меня есть два компонента Счетчик и Счетчики.Компонент счетчиков имеет это состояние 

  state = {
counters: [
  { id: 1, value: 3 },
  { id: 2, value: 0 },
  { id: 3, value: 4 },
  { id: 4, value: 0 }
]

};

Я использовал приведенный ниже рендер в Counter.jsx 

  render() {
return (
  <div>
    <button
      onClick={this.handleReset}
      className="btn btn-primary btn-sm m-2"
    >
      Reset
    </button>
    {this.state.counters.map(counter => (
      <Counter
        key={counter.id}
        onDelete={this.handleDelete}
        onIncrement={this.handleIncrement}
        counter={counter}
      />
    ))}
  </div>
);

}

Яотправка onIncrement 

  render() {
return (
  <div>
    <span className={this.badgeClass()}>{this.formatCount()}</span>
    <button
      onClick={() => this.props.onIncrement(this.props.counter)}
      className="btn btn-secondary btn-sm"
    >
      Increment
    </button>
    <button
      onClick={() => this.props.onDelete(this.props.counter.id)}
      className="btn btn-danger btn-sm m-2"
    >
      Delete
    </button>
  </div>
);

}

Когда я печатаю this.props.counter в Counter.jsx, объект печатается

Но когда я использую его в Counters.jsxиспользуя метод 

handleIncrement = counter => {
console.log("this is counter" + counter);

}

Счетчик печатает пустой объект

...