对解构变量进行赋值是否合适？

Question

我已经state这样声明了， this.state = { filtersEnabled: false}后来我destructured这个对象如下，let { filtersEnabled } = this.state;现在，我想改变 的值filtersEnabled，filtersEnabled = true当我这样做时console.log(this.state.filtersEnabled)，答案是=> false，但是如果我按如下方式更改值 this.state.filtersEnabled = true现在如果我这样做的话console.log(this.state.filtersEnabled)，答案就是=> true，这里有什么问题，destructured1.我们不对变量进行任何赋值吗？或者destructured2.我们不对状态变量进行任何赋值吗？

Answer 1

当您像这样更改值时：

 this.state.filtersEnabled = true

您正在改变财产的价值。但是当你像这样改变值时：

 filtersEnabled = true

您基本上为filtersEnabled 分配了一个新值。不再引用原始值。

考虑这个例子：

let a = 1;

let b = a;

a++;

你期望b是吗2？不，因为++、 like+=和=都是创建新分配的运算符。

这也是我们需要let这些案例的原因。const不允许我们做出改变。

然而，这确实改变了两者：

const a = { val: 1 };

const b = a;

a.val++;

b指向同一个对象。我们从不重新分配a（这也是我们可以在这里使用的原因），但我们确实重新分配（和）的const属性。所以仍然是同一个对象，但我们修改了对象内部的某些内容。 ab

Answer 2

在 React 中，当你想要更新时，state你应该通过方法传递，this.setState而不是直接改变状态。

不要直接修改状态

执行destructuring该操作this.state将根据从解构的对象获取的不同键的值创建新变量。这将失去元素与引用的任何类型的耦合，因为只有对象键可以引用它们的主要引用，无论它们发生变化。

let person = {

  "name": "John Doe",

  "age": 40

};

person.name = "Jeanne Doe";

console.log(person);

let { name } = person;

name = "Scott Duck"

console.log(person);

正如您在上面的示例中看到的，在我解构对象之后，person变量name不再与person对象紧密相连，我们释放了对该person.name属性的引用。

当您访问时，filtersEnabled您不再访问具有相同名称的组件状态的值，而是访问该变量在特定时间保存的值。

为了保持对状态中的值的严格控制，请使用this.setState改变状态并通过this.state.filtersEnabled或使用结构化值进行访问如果您知道解构中创建的变量所保存的值将与 中的值相同state，则可以在只要render我们知道render方法大多数时候都会在状态改变时执行。

Answer 3

不会。通过破坏变量，它会转换为局部变量，并且状态是全局的，因此您需要做的就是this.state.filtersEnabled = true在状态中全局重新分配它，以便在类中的任何地方使用。

通过这样做this.state.filtersEnabled = true，它将重新评估该值，但如果您需要重新渲染视图，那么您必须这样做this.setState({ filtersEnabled: true});