javascript - react : How to update object in array map

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

更新

由于这是现在已接受的答案，所以让我在@Auskennfuchs 的评论之后给出另一个最佳方法。这里我们使用Object.assign和 index 来更新当前计数器。通过这种方法，我们可以避免在计数器上使用不必要的map。

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = e => {
    const {
      target: {
        dataset: { i }
      }
    } = e;
    const { counters } = this.state;
    const newCounters = Object.assign(counters, {
      ...counters,
      [i]: { ...counters[i], value: counters[i].value + 1 }
    });
    this.setState({ counters: newCounters });
  };

  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          {/* We are using function reference here */}
          <button data-i={i} onClick={this.increment}>
            +
          </button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

作为一种替代方法，您可以使用计数器名称，映射计数器并递增匹配的计数器。

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = name => {
    const newCounters = this.state.counters.map(counter => {
      // Does not match, so return the counter without changing.
      if (counter.name !== name) return counter;
      // Else (means match) return a new counter but change only the value
      return { ...counter, value: counter.value + 1};
    });

    this.setState({counters: newCounters});
  };


  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          <button onClick={() => this.increment(counter.name)}>+</button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

如果您使用上面的处理程序，它将在每次渲染时重新创建。您可以将其提取到单独的组件或使用数据集。

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = e => {
    const {target} = e;
    const newCounters = this.state.counters.map(counter => {
      if (counter.name !== target.dataset.name) return counter;
      return { ...counter, value: counter.value + 1};
    });
    this.setState({counters: newCounters});
  };


  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          { /* We are using function reference here */ }
          <button data-name={counter.name} onClick={this.increment}>+</button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />