TypeError 更新嵌套的对象数组

Question

我希望能够由此更新状态对象：

this.state = {
          items: {},
}

对此：

this.state = {
          items: {
              2020-01-01: [
                     {'text': 'Some text', 'start_time': 'Some time'},
                     {'text': 'Some text', 'start_time': 'Some time'}],
              2020-01-02: [
                     {'text': 'Some text', 'start_time': 'Some time'},
                     {'text': 'Some text', 'start_time': 'Some time'}]
          }
}

通过使用扩展运算符：

//response from the API
response.items.map((item, index) => {
  this.setState(prevState => ({
           items: {
             ...prevState.items,
             [item.time]: [
               ...prevState.items[item.time], 
               {
                'text': item.summary,
                'start_time': item.start_time
               }]
           }
  }))
});

但这会产生类型错误：

TypeError: Invalid attempt to spread non-iterable instance

以这种方式更新状态对象的目的是使用从 API 中提取的数据渲染 this 组件。但是我好像不太对。

Answer 1

无论time在.map中是什么，在初始状态下都不作为items的属性存在，第一次这段代码是运行:

const initialState = {
  items: {},
};

const time = '2020-01-01';
const newState = ({
  items: {
    ...initialState.items,
    [time]: [
      ...initialState.items[time],
      {
        'text': item.summary,
        'start_time': item.start_time
      }
    ]
  }
});

替换为空数组，以便它可以正确传播：

...(initialState.items[time] || []),

const initialState = {
  items: {},
};

const item = { summary: 'foo', start_time: 'bar' };

const time = '2020-01-01';
const newState = ({
  items: {
    ...initialState.items,
    [time]: [
      ...(initialState.items[time] || []),
      {
        'text': item.summary,
        'start_time': item.start_time
      }
    ]
  }
});
console.log(newState);

TypeError 更新嵌套的对象数组

TypeError updating a nested array of Objects

javascript

setstate

reactjs

react-native