推送嵌套对象时反应状态更改

Question

I'm trying to add/push a javascript object (let's call this 'session') to this.state.sessions.

I've tried this two ways:
1) Concat'ing the new session

this.setState({sessions: this.state.sessions.concat(session)});

2) Using React's immutability helpers

var newState = React.addons.update(this.state, {
            sessions : {
                $push : [session]
            }
        });
this.setState(newState);

While the shallow data (eg sessions[i].location ) is added correctly, the problem is that all prior session's scope is now set to the new session.scope. In the picture link below you can see that the first session's scope values ( sessions[0].scope ) were overwritten by the second session's scope values ( sessions[1].scope ). How do I ensure that when I add a new session, prior session's values aren't affected?

App state picture

Answer 1

Since sessions is an array, I would've done the following:

addSession = (newSession) => {
  let tempArray = this.state.sessions.slice();
  tempArray.push(newSession);
  this.setState({sessions: tempArray});
}

The above creates a shallow copy of the sessions array and puts it in a temporary variable. Next, it pushes the new session into the array and once that's done we overwrite the this.state.sessions with the new variable.

Answer 2

I think this has little to do with react, and the problem might be that the object in sessions[0].scope is copied by reference. That scope object might be reference shared between the old and new session values.