时间戳

首页 > 解决方案 > 如何动态更新对象的状态？

reactjs - 如何动态更新对象的状态？

问题描述

我正在尝试创建一个可重用的 updateComponentHandler，它将根据通过各种输入字段返回的值更新任何选定组件的状态。

通常人们会使用这样的东西：

updateComponentHandler = value => {
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.selected === true)
      .shift();
    selected.backgroundColor = value;
    return { selected};
  });
};

但是，为了使其真正可重用，我无法对 backgroundColor 进行硬编码，因为有些情况需要更新其他属性。因此，在我的输入组件中，我将返回需要更新的属性和值，如下所示：

handleChange={color =>
  this.props.updateComponent({ backgroundColor: color.hex })
}

例如返回 backgroundColor: "#CCCCCC"

我的问题是我不知道如何将这个值插入到 setState 中，使用“selected.backgroundColor = value;” 从上面的例子。谁能告诉我该怎么做？

标签： reactjs

解决方案

我不确定我是否理解您要执行的操作，但是您可以做的一件事是传递状态中对象的键并执行selected[key] = value.

updateComponentHandler = (key, value) => {
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.selected === true)
      .shift();
    selected[key] = value;
    return { selected };
  });
};

handleChange={color =>
  this.props.updateComponent('backgroundColor', color.hex)
}

推荐阅读