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={() => {

    this.setState(state => ({

        counters: state.counters.map((item, j) => {

            // is this the counter that I want to update?

            if (j === i) {

                return {

                    ...item,

                    value: item.value + 1

                }

            }

            return item

        })

    }))

}}>+</button>