無法設置狀態響應

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 }); 
}