Question

我创建了两个更改状态的函数：

~/.hyper.js

上面的代码可以工作并更改状态，然后我创建了上面函数read_excel("C:/documents/notebook.xlsx")的简短形式，但是没有用

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 1 },
      { id: 2, value: 2 },
      { id: 3, value: 0 },
      { id: 4, value: 4 },
    ],
  };

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };
...

在上述方法中，我使用了handleIncrement并且没有直接更改状态。那么问题是什么？

Answer 1

您的“形式略短”的功能与原始代码完全不同。 this.state.counters是一个对象数组。在第一个示例中，您可以通过更改数组中一个对象中的value来正确更新该数组。在第二个示例中，将数组替换为this.state.counters[this.state.counters.indexOf(counter)].value++的结果，该结果是数字而不是数组。

您可能打算改为执行以下操作：

  handleIncrement = (counter) => {
    this.state.counters[this.state.counters.indexOf(counter)].value++;
    this.setState({
      counters: this.state.counters,
    });

这将增加数组内部的值，然后通过将键setState()传入数组来调用counters。然而，像这样直接改变状态在React中被认为是较差的做法，因为很容易忘记调用setState()来开始渲染我们的组件。相反，我们创建一个副本并更新该副本并将其传递给setState()。

更改状态无法按预期进行

1 个答案: