javascript - react : SetState not updating nested object value

Question

我在我所在州的特性如下所示:

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

我希望 height 属性根据来自输入元素的用户输入进行更新，因此我创建了一个如下函数:

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

}

其中样式参数是一个字符串，其中包含要更新的属性的路径，在本例中为“card.height”。我为新状态创建了一个对象并尝试将其传递到 setState 但它不会更新高度属性。

有人知道如何解决这个问题吗？我被难住了!

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 这样的工具使其不再冗长