2016-03-05 54 views
1

我一直在四處尋找的答案,這個問題現在很長一段時間,所以我只是要問:反應:'previousState'被認爲是可變的嗎?

當傳遞函數作爲第一個參數來this.setState,是previousState可變?

From React docs

在文件中指出,該功能(狀態,道具)可用於從以前的更新狀態,但它也確定使用這樣的功能:

示例:假設使用用戶配置文件的state.profiles,並且我們想更改一個用戶配置文件。所以問題是關於嵌套對象的狀態。

// Profiles has this structure: 
// {1:{name: 'Old Name', age: 21}, 2: {name: 'Profile 2', age: 12}}; 

var changedProfile = {id: 1, name: 'New Name', age: 21}; 
this.setState(function (previousState) { 
    previousState.profiles[changedProfile.id] = changedProfile; 
    return previousState; 
}) 

可以嗎? previousState.profiles可以被認爲是可變的嗎?

當然,替代方法是做這樣的事情:如果變異previousState是OK

var changedProfile = {id: 1, name: 'New Name', age: 21}, 
    newProfiles = _.extend({}, this.state.profiles); 

newProfiles[chanedProfile.id] = changedProfile; 
this.setState({profiles: newProfiles}); 

但是,那麼它似乎是多餘的,以我的對象,然後設置狀態複製到複製並改變了對象。

編輯:首先提供了一個不好的例子。用更好的例子取而代之。

回答

0

在您的例子您的新狀態並不取決於在所有之前的狀態,所以你可能只是做:

this.setState({ 
    a: 123; 
    b: {x: 'X', y: 'Y'}; 
}) 

然而,如果這僅僅是一個壞榜樣,不知何故你需要檢查以前的狀態,以確定新的狀態,那麼這將是這樣的:

this.setState(function (previousState) { 
    return { 
    a: previousState.a + 123; 
    b: Object.assign(previousState.b, {x: 'X', y: 'Y'}); 
    } 
}) 

本質的結果是,我們返回一個對象,它是新的狀態,我們可以使用以前的狀態,因爲我們認爲合適的 - 所以是的,你可以像你在考試中一樣改變以前的狀態ple

+0

對不起,可怕的例子。我現在更新了這個問題。如果previousState是可變的,那麼我不明白爲什麼我會在所有這些例子中看到_.extend在哪裏?使用React.addons.update也似乎有點矯枉過正(除非它也用於其他的東西)。 – stianlp

+0

我認爲原因是複製當前狀態並修改它更清楚地理解。儘管將函數傳遞給setState並在函數中返回對象可能不會立即顯而易見。我只是用一個初始狀態爲.x = 5的示例組件測試了這個;然後有一個onClick更新prevState對象的按鈕;然後打印出新的狀態。事情正常 - 我認爲這只是一個風格的問題 – luanped

+0

好吧!謝謝你的回答。想想我會研究反應的來源。你知道previousState是一個深層還是淺層的副本嗎? – stianlp

相關問題