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&nbsp;onClick={()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.setState(state&nbsp;=>&nbsp;({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;counters:&nbsp;state.counters.map((item,&nbsp;j)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;is&nbsp;this&nbsp;the&nbsp;counter&nbsp;that&nbsp;I&nbsp;want&nbsp;to&nbsp;update? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(j&nbsp;===&nbsp;i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...item, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;item.value&nbsp;+&nbsp;1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;item &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;}))}}>+</button>

Answer 2

您可以创建这样的单击处理程序handleClick&nbsp;=&nbsp;(index)&nbsp;=>&nbsp;{ &nbsp;&nbsp;this.setState(state&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;obj&nbsp;=&nbsp;state.counters[index];&nbsp;//&nbsp;assign&nbsp;the&nbsp;object&nbsp;at&nbsp;the&nbsp;index&nbsp;to&nbsp;a&nbsp;variable &nbsp;&nbsp;&nbsp;&nbsp;obj.value++;&nbsp;//&nbsp;increment&nbsp;the&nbsp;value&nbsp;in&nbsp;the&nbsp;object &nbsp;&nbsp;&nbsp;&nbsp;state.counters.splice(index,&nbsp;1);&nbsp;//&nbsp;remove&nbsp;the&nbsp;object&nbsp;from&nbsp;the&nbsp;array &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;counters:&nbsp;[...state.counters,&nbsp;obj]&nbsp;}; &nbsp;&nbsp;});}像这样称呼它......&nbsp;<button onClick={() => handleClick(i)}>可以缩短它。只是想解释一下你如何去做

Answer 3

您可以使用i已有的将计数器映射到新数组，用更新的计数替换目标项：&nbsp;&nbsp;()&nbsp;=>&nbsp;this.setState(({&nbsp;counters&nbsp;})&nbsp;=>&nbsp;({&nbsp;counters:&nbsp;counters.map((prev,&nbsp;i2)&nbsp;=>&nbsp;i&nbsp;===&nbsp;i2&nbsp;?&nbsp;{&nbsp;...counter,&nbsp;count:&nbsp;counter.count&nbsp;+&nbsp;1&nbsp;}&nbsp;:&nbsp;prev)&nbsp;}))