无法设置状态响应

Question

由于某些原因，我无法在React onClick中设置状态。如果我在“shape1”中代替“形状”来硬编码，但是我希望循环每个关键点并动态设置它，因为有不同数量的形状。

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

Answer 1

在你的问题中的代码将永远只是设定一个“形”的状态值，以“黑”，不分配多个形状值。我想你期望传入数组的“形状”变量将在大括号内用作要设置的变量的名称。容易犯的错误，但在JS中，冒号左边的名称是静态文本，不受您在范围内的变量影响。

从你的描述中，我相信你已经使用了诸如“shape1”，“shape2”之类的状态名称。因此，也许这样的代码将工作：

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

但说实话，这是一个危险的，奇怪的方式来编写的。 危险，因为如果稍后添加另一个状态变量而不意味着是形状的一部分，它将被覆盖。 很奇怪，因为你正在用你的变量命名重新创建数组的常用功能。

我反而推荐你将'shape1'，'shape2'等状态值转换成一个'shapes'数组来存储状态。然后就可以用这样的代码：

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