React：如何更新数组映射中的对象

Question

我试图在单击按钮时更新数组的值。但我无法弄清楚如何使用this.setState.

export default class App extends React.Component {

  state = {

    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]

  };

  render() {

    return this.state.counters.map((counter, i) => {

      return (

        <div>

          {counter.name}, {counter.value}

          <button onClick={/* increment counter.value here */}>+</button>

        </div>

      );

    });

  }

}

counter.value单击按钮时如何增加？

Answer 1

您可以使用一个处理程序来映射counters和更新单击按钮的相应计数器项。这里我们i从父作用域中取出，并比较它以找到要更改的正确项。<button onClick={() => {&nbsp; &nbsp; this.setState(state => ({&nbsp; &nbsp; &nbsp; &nbsp; counters: state.counters.map((item, j) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // is this the counter that I want to update?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (j === i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...item,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: item.value + 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return item&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }))}}>+</button>