在反应中，setState不接受动态值？

Question

我很少有像

这样的州

this.state = {
   abc1,
   abc2,
   abc3
}

为什么我无法动态设置状态？像

handleDiscount = (count) => {
        this.setState({
            `abc${count}`: `!this.state.abc${count}`
        });
    }

计数为1/2/3。

Answer 1

问题是您正在使用模板字符串作为对象属性声明;这是一个语法错误。即便如此，您也无法将模板字符串设置为变量并使用它：

let count = 2;
let bar = `baz${count}`;
// This will set foo.bar, not foo.baz2
let foo = {
  bar: count
};

您可以使用ES6 computed property names：

let count = 2;
let bar = `baz${count}`;
// This will set foo[<value of bar>], i.e. foo.baz2
let foo = {
  [bar]: count
};

这也适用于模板字符串：

let count = 2;
// This will set foo[<template string evaluated>], i.e. foo.baz2
let foo = {
  [`baz${count}`]: count
};

此外，您的值中的模板字符串是错误的。这不会评估this.state中的属性，相反，它将是字符串，例如"!this.state.abc2"。 !this.state是代码，而不是字符串。你需要这个：

!this.state[`abc${count}`]

话虽这么说，每当根据以前的状态设置React状态时，你应该用React docs on setState来调用带有函数的setState：

  

[...]如果下一个状态取决于之前的状态，我们建议   使用更新程序功能表格，而不是：

this.setState((prevState) => {
  return {counter: prevState.quantity + 1};
});

因此，总而言之，这应该可以解决问题：

handleDiscount = (count) => {
  this.setState((prevState) => {
    return { [`abc${count}`]: !prevState[`abc${count}`] }
  });
};

Answer 2

要获取目标对象的属性，请使用target["string property name"] bracket syntax。

至于向对象添加动态属性，您应该使用{ ["string property name"]: value } computed property name syntax。

您的固定代码应如下所示：

handleDiscount = (count) => {
  this.setState({
    [`abc${count}`]: !this.state[`abc${count}`]
  });
}

Please see working example here

作为旁注，您应该检查Linus' answer regarding React's setState behavior。

Answer 3

这不是动态设置对象属性的方式。这是模板文字。

handleDiscount = (count) => {
    this.setState({
        abc[count]: !this.state.abc[count]
    });
}

但是你不能用数组索引做到这一点