javascript - setState在react中不接受动态值？

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 状态时，您应该使用函数调用 setState，从 React docs on setState :

[...] If the next state depends on the previous state, we recommend using the updater function form, instead:

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

所以，总而言之，这应该可以解决问题:

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