Question

我正在尝试创建一个处理程序，该处理程序将更改状态中定义的所有组件的背景色。在这种状态下，我定义了usedComponents，它是一个对象数组，每个对象代表单个组件的属性列表（backgroundColor，fontSize等）。

我的状态如下：

constructor(props) {
  super(props);
  this.state = {
    components: components,
    usedComponents: [components[0], components[1], components[2]],
  };
  this.changeComponentsBgColorHandler = this.changeComponentsBgColorHandler.bind(
    this
  );
}

components是所有组件的导入数组，而usedComponents是当前活动组件的列表。组件对象的示例：

{
  componentName: "Header 02",
  padding: "small",
  fontSize: "small",
  fontColor: "#1f1f1f",
  fontFamily: "Sans-serif",
  backgroundColor: "#ffffff",
  image: placeholderLogo,
  selected: false,
  isEditing: false,
  margins: false,
  roundCorners: "none",
  mobile: "false"
}

要更改backgroundColor属性，我创建了一个处理程序：

changeComponentsBgColorHandler = color => {
  this.setState(state => {
    const usedComponents = state.usedComponents.map(     
      item => (item.backgroundColor = color)
    );

    return {
      usedComponents
    };
  });
};

我的问题是，这将从每个对象中删除所有其他属性，并仅为每个对象设置backgroundColor。如何仅更新backgroundColor道具而不从已更新的对象中删除所有其他道具？

Answer 1

问题在于，您没有从map函数返回相同的对象，而只是return更新了颜色，因此基本上得到了['blue', 'blue', ...]。

您需要将所有属性spread {{3}}，然后更改backgroundColor。

changeComponentsBgColorHandler = color => {
  this.setState(prevState => ({
    usedComponents: prevState.usedComponents.map(item => ({
      ...item,
      backgroundColor: color,
    })),
  });
};

Answer 2

这样做

changeComponentsBgColorHandler = color => {
    this.setState(state => {
        const usedComponents = state.usedComponents.map(     
            item => ({...item, backgroundColor: color})
        );

        return {
            usedComponents
        };
    });
};

React：如何在不删除所有其他道具的情况下更新数组中的项目？

2 个答案: