如何迭代和調用更新React狀態散列的每個單獨元素的函數？

我的陣營App有狀態稱爲googleAccounts它最初是空的：如何迭代和調用更新React狀態散列的每個單獨元素的函數？

getInitialState() { 
    return { 
     value: '', 
     googleAccounts: {} 
    }; 
    },

我有一個簡單的搜索欄。當執行搜索時，服務器與Google的API進行通信以獲取該搜索的帳戶列表，然後googleAccounts用帳戶填充。這項功能非常出色，帳戶顯示在搜索欄下方作爲搜索結果。

searchGoogleAccounts(e){ 
    e.preventDefault(); 
    Client.getGoogleAccounts(this.state.value, (accounts) => { 
     this.setState({googleAccounts: accounts}); 
    }); 
    },

然後我想利用每個帳戶，並將其發送到Atlassian的API，看看是否在Atlassian的數據庫中存在的帳戶。我創建了一個接受帳戶名稱的函數，並且如果存在該名稱的Atlassian帳戶，它將以JSON形式返回該帳戶。這個功能也可以正常工作。

我只是不確定我應該如何使用這個函數來正確地與DOM交互。如果有Atlassian帳戶，我想顯示覆選標記。如果沒有帳戶，我想顯示一個按鈕來創建Atlassian帳戶。當它正在等待來自Atlassian API的響應時，我想顯示一個加載圖標。

我試着給googleAccounts中的每一個添加一個atlassian屬性。這種方法的問題是我每次抓取一個atlassian帳戶時都必須更新整個googleAccounts。因此，單獨的呼叫將同時更新googleAccounts並覆蓋彼此的更改。我想直接在函數內改變DOM，但我認爲這被認爲是不安全的。我不知道我最好的選擇是什麼，任何建議，將不勝感激。

來源

2017-01-12 Snubber

由於您正在管理多件物品的狀態，因此我會考慮Redux，因此Reducer可能會有所幫助。 – Eldelshell

請說明你如何使用'setState'來更新'atlassian'屬性。拋開這樣的細節會讓你很難知道你做錯了什麼。我發佈了一個答案，但我假設你遇到了這個問題。如果這是錯誤的，你應該展示你已經試圖幫助縮小問題的範圍，儘管它是正確的，但是對於發現這個問題的任何人來說，看到最初的嘗試與提議的解決方案形成對比是很有幫助的。 – philraj

您可以改爲將更新函數傳遞給setState。

this.setState((prevState, props) => { 
    return { 
    googleAccounts: { 
     ...prevState.googleAccounts, 
     [someGoogleAcctId]: { 
     ...prevState.googleAccounts[someGoogleAcctId], 
     atlassian: resultOfAPICall 
     } 
    } 
    }; 
});

這樣，你是不是在多個API回調訪問this.state，而是你總是改變之前接受目前最多最新狀態。您的回調可能會覆蓋彼此的更改，因爲它們是從相同的原始狀態快照開始的，而不是考慮現有的狀態更改（如果不使用更新器功能，則無法執行此操作，因爲您沒有有權訪問中間狀態）。

來源

2017-09-05 04:15:40 philraj

如何迭代和調用更新React狀態散列的每個單獨元素的函數？

回答

相關問題