反應：SetState不更新嵌套對象的值

Question

我在我的州的財產看起來像這樣：

state: {
    styling: {
          styling: {
              card: {
                  height: auto;
   }
  }
 }
}

我希望height屬性根據Input元素上的用戶輸入進行更新，因此我創建了一個如下函數：

  handleCardChange = (event, style) => {
let property = "styling.styling." + style;
let updatedState = {
  "styling.styling.card.height": event.target.value
}
console.log(updatedState);
this.setState(updatedState);

}

其中style參數是一個字符串，其中包含要更新的屬性的路徑，在本例中為“ card.height”。 我為新狀態創建了一個對象，並嘗試將其傳遞給setState，但它不會更新height屬性。

有人知道如何解決這個問題嗎？ 我很沮喪！

Answer 1

根據您的代碼，updatedStyle為

{
  "styling.styling.card.height": xxxx
}

而您想要：

styling: {
    styling: {
        card: {
            height: auto;
        }
    }
}

UpdatedStyle將類似於：

setState(previousState => ({
  styling: {
    ...previousState.styling,
    styling: {
      ...previousState.styling.styling,
      card: {
        ...previousState.styling.styling.card,
        height: event.target.value
      }
    }
  }
})

或使用類似https://github.com/mweststrate/immer之類的工具來使其不再那么冗長

Answer 2

您無法訪問類似的子元素。 它將添加一個styling.styling.card.height為styling.styling.card.height的屬性到updateState對象，這不是您想要的。

如果您確定所有必要的嵌套操作，請嘗試以下操作： this.setState({styling: {styling: {card: {height: event.target.value}}}})