Question

我正在尝试添加/推送一个javascript对象（让我们称之为'session'）到this.state.sessions。

我试过这两种方式：
1）Concat'ing新会议

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

2）使用React的不变性助手

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

虽然正确添加了浅层数据（例如sessions[i].location），但问题是所有先前会话的范围现在都设置为新的session.scope。在下面的图片链接中，您可以看到第一个会话的范围值（sessions[0].scope）被第二个会话的范围值（sessions[1].scope）覆盖。如何确保在添加新会话时，之前的会话值不受影响？

App state picture

Answer 1

由于sessions是一个数组，我将完成以下操作：

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

上面创建了sessions数组的浅表副本，并将其放入临时变量中。接下来，它将新会话推送到数组中，一旦完成，我们用新变量覆盖this.state.sessions。

Answer 2

我认为这与react几乎没有关系，问题可能是sessions[0].scope中的对象是通过引用复制的。该scope对象可能是旧会话值和新会话值之间共享的引用。

推送嵌套对象

2 个答案: