推送嵌套對象時反應狀態發生變化

我試圖向this.state.sessions添加/推送一個JavaScript對象（我們稱之爲「會話」）。推送嵌套對象時反應狀態發生變化

我已經試過這兩種方法：
1）Concat'ing新的會話

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

2）使用作出反應的不變性助手

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

來源

2016-04-24 Kunal

我認爲這與反應沒什麼關係，問題可能是sessions[0].scope中的對象被引用複製。 scope對象可能是舊的和新的會話值之間的引用共享。

來源

2016-04-24 13:17:28 Maneeshpal

我將此標記爲答案。雖然我還沒有解決我的原始代碼庫上的問題，但我仍然按照預期創建了一個更簡單的應用程序（仍帶有子組件）和作用域更新。 – Kunal

由於sessions是一個數組，我已經做了以下內容：

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

上面創建sessions陣列的淺拷貝，並把它放在一個臨時變量。接下來，它將新會話推入數組，一旦完成，我們用新變量覆蓋this.state.sessions。

來源

2016-04-24 13:12:42 Chris

感謝克里斯，我給你的建議去了，但唉同樣的問題仍然存在，但我注意到以下古怪：我在'let tempArray = this.state.sessions.slice（）;'後設置斷點。我添加了兩個會話，一個沒有作用域'sessions [0] .scope = []'，另一個作用域爲'sessions [1] .scope = [{id：1，...}]''。奇怪的是，tempArray已經將第二個會話的作用域應用於第一個會話作用域，即'session [0] .scope == session [1] .scope。 – Kunal

推送嵌套對象時反應狀態發生變化

回答

相關問題