Javascript 更改状态不会'；I don’我没有按预期工作_Javascript_Reactjs

Javascript 更改状态不会'；I don’我没有按预期工作

javascript reactjs

Javascript 更改状态不会'；I don’我没有按预期工作,javascript,reactjs,Javascript,Reactjs,我创建了两个更改状态的函数： 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

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

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

，但它不起作用

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

在上述方法中，我使用了

setState

，没有直接更改状态。那么它有什么问题呢？

您的“略短的形式”与原始代码完全不同

this.state.counters

是一个对象数组。在第一个示例中，通过更改数组中某个对象的

值

，可以正确更新该数组。在第二个示例中，将数组替换为

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（）
。然而，像这样直接改变状态在React中被认为是不好的做法，因为很容易忘记调用setState（）
来开始呈现组件。相反，我们创建一个副本并更新副本，然后将其传递给setState（）
您的“稍微短一点的形式”执行与原始代码完全不同的操作this.state.counters
是一个对象数组。在第一个示例中，通过更改数组中某个对象的值
，可以正确更新该数组。在第二个示例中，将数组替换为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（）
。然而，像这样直接改变状态在React中被认为是不好的做法，因为很容易忘记调用setState（）
来开始呈现组件。相反，我们创建一个副本并更新副本，并将其传递给setState（）
如何用一个我称为this.state.counters[this.state.counters.indexOf（counter）].value++
的数字替换数组，其中在找到索引后，这是一个特定的数组，它指向哪个数组，然后.value++
将该对象的值增加一。你能纠正一下吗me@BasirPayendathis.state.counters[this.state.counters.indexOf（counter）].value++
增加现有数组中的值并返回该数字。@BasirPayenda查看我的最新编辑，了解我对您尝试做什么以及不应该这样做的原因的猜测。谢谢，还有一件事。在第一个示例中，您不认为计数器[索引]={…计数器}
是一行额外的代码，因为我们已经在使用数组的副本，不需要再创建其项的另一个副本。即使删除这一行也不会影响我的application@BasirPayenda“排列”操作符是浅拷贝。我的意思是constcounters=[…this.state.counters]
创建一个新数组，其中引用的对象与this.state.counters
中的对象相同。它不会复制这些对象。这就是为什么我们需要做counters[index]={…counter}。这将复制要更新的对象的键和值。请注意，这也是一个浅拷贝。如果这些值中有任何一个是列表或对象，我们将获得对这些相同列表或对象的引用，而不是它们的副本。我是如何用一个编号替换数组的，我称之为this.state.counters[this.state.counters.indexOf（counter）]。value++
where在找到索引后，这是一个特定的数组，它指向哪个数组，然后.value++
将该对象的值增加一。你能纠正一下吗me@BasirPayendathis.state.counters[this.state.counters.indexOf（counter）].value++
增加现有数组中的值并返回该数字。@BasirPayenda查看我的最新编辑，了解我对您尝试做什么以及不应该这样做的原因的猜测。谢谢，还有一件事。在第一个示例中，您不认为计数器[索引]={…计数器}
是一行额外的代码，因为我们已经在使用数组的副本，不需要再创建其项的另一个副本。即使删除这一行也不会影响我的application@BasirPayenda“排列”操作符是浅拷贝。我的意思是constcounters=[…this.state.counters]
创建一个新数组，其中引用的对象与this.state.counters
中的对象相同。它不会复制这些对象。这就是为什么我们需要做counters[index]={…counter}。这将复制要更新的对象的键和值。请注意，这也是一个浅拷贝。如果这些值中有任何一个是列表或对象，我们将获得对这些相同列表或对象的引用，而不是它们的副本。