Question

出于某种原因，我无法在React onClick中设置状态。如果我在“shape1”中硬编码代替“shape”，它可以工作，但我想循环遍历每个键并动态设置它，因为有不同数量的形状。

resetColors() {
  Object.keys(this.state).forEach(shape => {
    this.setState({shape: 'black'})
  })
}

Answer 1

问题中的代码总是只将“形状”状态值设置为“黑色”，并且不会分配多个形状值。我认为您期望传递到数组中的“shape”变量将在花括号内用作要设置的变量的名称。容易犯错误，但在JS中，冒号左边的名称是静态文本，不受范围内变量的影响。

根据您的描述，我相信您使用了像“shape1”，“shape2”这样的州名。所以也许这样的代码可以工作：

resetColors() {
  const valuesToSet = {};
  Object.keys(this.state).forEach(keyName) => {
    valuesToSet[keyName] = 'black'; 
  });
  this.setState(valuesToSet);
}

但说实话，这是一种冒险和奇怪的编码方式。 Risky ，因为如果稍后添加另一个状态变量并不是形状的一部分，它将被覆盖。 很奇怪，因为你正在用你的变量命名重新发明经常使用的数组功能。

我推荐你的'shape1'，'shape2'等等。状态值被转换为单个'形状'数组以存储在状态中。然后你可以使用这样的代码：

resetColors() {
  const newShapes = this.state.shapes.map( (shape) => 'black' );
  this.setState({ shapes: newShapes });
}

无法setState React

1 个答案: