Question

有没有办法只更改this.state.first的一部分？假设第三个索引为true，但其余部分保持原样。我不想重写它。我曾考虑使用Spread Sytax，但不知道如何？

import React from "react";

class MyClass extends React.Component {
  constructor() {
    super();
    this.state = {
      first: [false, false, false, false, false, false, false]
    };
  }
}

Answer 1

我建议您按照https://github.com/kolodny/immutability-helper

中的说明检查immutability-helper软件包（文档：https://reactjs.org/docs/update.html）。

如Chris在另一个答案中所述，它将确保创建新数组。没有新的数组，状态将不会知道任何更改，并且需要更新。在您的情况下，代码如下所示：

import React from "react";
import update from "immutability-helper";

class MyClass extends React.Component {
  constructor() {
    super();
    this.state = {
      first: [false, false, false, false, false, false, false]
    };
  }

  onChange = (toggleIndex) => {
    //gets current value and uses bang (!) operator to get inverse value
    let newValue = !this.state.first[toggleIndex];

    //immutability-helper will take care of making sure the array gets updated and recreated
    let newState = update(this.state, {
            first: {
                [toggleIndex]: {
                    $set: newValue
                }
            }
        }
    );

    this.setState(newState);
  }
}

Answer 2

您可以执行以下操作：

this.setState(prevState => {
  const newFirst = [...prevState.first];
  newFirst[2] = true;
  return {first: newFirst};
});

这将产生：

[false, false, true, false, false, false, false]

如您所知，您可以用setState()来改变状态。要仅更改数组中的一个值，我们需要创建可以使用的数组的临时副本（即const newFirst = [...prevState.first]的作用），更改所需索引的值（newFirst[2] = true）并然后将状态设置为该新数组。

这里要注意的重要一点是，我们在传递给setState()的回调函数中完成了所有这些工作。这向我们保证，我们始终在使用先前状态，而不是当前状态。在您设置取决于先前状态的新状态时，这是一个好习惯。

Answer 3

是的，可以，而且只需一行：

this.setState(prevState => {
   first: [...prevState.first.slice(0,1), true, ...prevState.first.slice(3)]});

Answer 4

首先不变地分配另一个变量，然后使用splice方法从特定索引中删除该值，将删除计数设置为1，为该索引分配一个新值

import React from "react";

class MyClass extends React.Component {
  constructor() {
    super();
    this.state = {
      first: [false, false, false, false, false, false, false]
    };
  }

  changeIndex = (index) => {
    this.setState(({ first }) => {
      let clone = [...first];
      clone.splice(index, 1, newValue);
      return { first: clone };
    });
  };
}

如何仅更改状态的一部分？

4 个答案: