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

您无法访问此类子元素。它将向您的updateState对象添加键为styling.styling.card.height的属性，这不是您想要的。

如果您确定所有必要的嵌套操作，请尝试以下操作： this.setState({styling: {styling: {card: {height: event.target.value}}}})

反应：SetState不更新嵌套对象的值

2 个答案: