Question

我正在创建对象数组并将其存储在这样的变量上：

const nameOption = nameOptions(listHotels);
const estadoOption = stateOptions(listHotels);
const cityOption = cityOptions(listHotels);

我的状态目前是这样的：

selectFilter: [
      { id: 1, type: 'Name'},
      { id: 1, type: 'Estado'},
      { id: 1, type: 'Cidade'},
    ],

我想将这些变量添加到称为“选项”的属性中，如下所示：

selectFilter: [
          { id: 1, type: 'Name', options: nameOption},
          { id: 1, type: 'Estado', options: estadoOption},
          { id: 1, type: 'Cidade', options: cityOption},
        ],

我该如何使用不可变反应方式？

Answer 1

首先存储要插入到普通对象中的值，其中属性与SevenDisplay sevendisplay = new SevenDisplay(YourActivity.this);的{{1}}值匹配：

type

然后将其与selectFilter合并为扩展版本：

const options = {
    Name: nameOptions(listHotels),
    Estado: stateOptions(listHotels),
    Cidade: cityOptions(listHotels)
}

注意：可能有一种更有效的方法来构建selectFilter对象，因为您似乎为每个属性迭代了this.setState(prevState => ({ selectFilter: prevState.selectFilter.map(filter => ({...filter, options: options[filter.type]}) ) }));。可以使用options进行一次扫描。但是，如果没有这些功能（listHotels，reduce，...）的详细信息，我将无法提供太多功能。研究调用nameOptions。

Answer 2

您可以使用Object.assign()将状态复制到新对象中。现在该对象是可变的。修改完毕后，您便可以用新版本替换整个状态。这是一个如何完成此操作的示例。

  handleChange= () => {
    let mutableState = Object.assign({}, this.state);
    mutableState.thingToChange = foo;
    this.setState(mutableState);
  };

Answer 3

this.setState(({selectFilter}) => (
    [
         {...selectFilter[0], options: nameOptions},
         {...selectFilter[1], options: estadoOptions},
         {...selectFilter[2], options: cityOptions},
    ]
);

如何在React的setState的Objects数组上添加项目？

3 个答案: