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

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

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'},
    ],

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

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

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

最佳答案

首先存储要插入到普通对象中的值，该对象的属性与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，stateOptions，...），我将无能为力。研究调用listHotels.reduce。