failed to concat nested array of object in setState of react

Question

What's wrong with below code?

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

It worked if photos have something, but if album is an empty object, I will got this error

Cannot convert undefined or null to object

@BoyWithSilverWings album is an empty object – Xie Xie Fang Feb 02 '18 at 07:31 — Xie Xie Fang, Feb 02 '18 at 07:31

score 3 · Accepted Answer · answered Feb 02 '18 at 07:31

3

You can also use: (...this.state.album.photos || []) so it parses the empty array at first:

const state = {
  album: {
    photos: undefined
  }
}

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

console.log(newState)

answered Feb 02 '18 at 07:31

Hemerson Carlin

7,354
1
27
38

what about using `Object.assign()` as I have done in the answer below? Which one would be better? – weirdpanda Feb 02 '18 at 07:32
IMO, there's no `better` solution nor right or wrong :). About differences between `Object.assign` and spread operator you can check [this](https://stackoverflow.com/questions/32925460/object-spread-vs-object-assign) answer :) – Hemerson Carlin Feb 02 '18 at 07:38
I also answered your question based on your code sample. You were already using spread operator in it. – Hemerson Carlin Feb 02 '18 at 07:38
I am aware of the difference, I am saying short-circuiting vs. chaining? – weirdpanda Feb 02 '18 at 07:39
I'd go for short-circuiting :) – Hemerson Carlin Feb 02 '18 at 07:41
1

this is elegant, many thanks! I have to be aware of default empty arr next time doing spread! – Xie Xie Fang Feb 02 '18 at 07:45
@XieXieFang you can either control this way or initiate `state.album.photos` as an empty array. Both of which will work eventually :) – Hemerson Carlin Feb 02 '18 at 07:47
2

I think better to init an empty array, it's more readable and less logic. – Xie Xie Fang Feb 02 '18 at 07:52

weirdpanda · Answer 2 · 2018-02-02T07:30:42.287

0

Yeah, that's the expected behaviour. The spread operator (...) will spread, that is, expand everything provided. If that's null, it can't possibly do that, right?

You can try something like:

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

edited Feb 02 '18 at 07:30

answered Feb 02 '18 at 07:27

weirdpanda

2,521
1
20
31

The `...` is the spread operator. `Object.assign()` will give us a new object based on the `photos` property. If it's null, it'll be an empty object and, hence, the spread operator will do nothing. However, if it does have content, it'll just spread it normally. – weirdpanda Feb 02 '18 at 07:31

Mayank Shukla · Answer 3 · 2018-02-02T07:43:42.223

Use Short circuit evaluation concept and put ||[] with state.albums.photos, if albums will be blank object then (photos=undefined || []) will return an empty array.

Use this:

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

Use updater function and prevState to compute the next state value.

failed to concat nested array of object in setState of react

3 Answers3