Question

以下代码出了什么问题？

this.setState({
  album: {
    ...this.state.album,
    photos: [
      ...this.state.album.photos,
      { url : newUrl }
    ]
  }
})

如果照片有效，它会有效，但如果相册是空对象，我会收到此错误

Cannot convert undefined or null to object

Answer 1

你也可以使用：(...this.state.album.photos || [])所以它首先解析空数组：

＆＃13;

const state = {
  album: {
    photos: undefined
  }
}

const newState = {
  album: {
    ...state.album,
    photos: [
      ...(state.album.photos || []),
      { url: 'newUrl' }
    ]
  }
}

console.log(newState)

＆＃13;

Answer 2

是的，这是预期的行为。传播运算符（...）将传播，即扩展所提供的所有内容。如果那是null，它就不可能这样做，对吧？

您可以尝试以下内容：

...( Object.assign( {}, this.state.album.photos )

Answer 3

使用Short circuit evaluation概念并将||[]与state.albums.photos放在一起，如果相册为空白对象，则(photos=undefined || [])将返回一个空数组。

使用此：

this.setState(prevState => ({
    album: {
        ...prevState.album,
        photos: [
            (...prevState.album.photos || []),
            { url : newUrl }
        ]
    }
}))

使用updater function和prevState计算下一个州的值。

无法在setState of react中连接嵌套的对象数组

3 个答案: