Reactjs 如何迭代并调用更新React状态哈希的每个元素的函数？

我的React应用程序有一个名为googleAccounts的状态，该状态最初为空：

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，但我读到这被认为是不安全的。我不确定我的最佳选择是什么，任何建议都将不胜感激

您可以将更新程序函数传递给

setState

this.setState（（prevState，props）=>{
返回{
谷歌会计：{
…prevState.googleAccounts，
[Somegogleacctid]：{
…prevState.googleAccounts[someGoogleAcctId]，
亚特兰西人：结果
}
}
};
});

---

这样，您就不会在多个API回调中访问

This.state

，而是在更改它之前总是接收当前最新状态。您的回调可能会覆盖彼此的更改，因为它们是从相同的原始状态快照开始的，而不是将现有状态更改考虑在内（如果不使用更新程序函数，则无法这样做，因为您无权访问中间状态）.

我将研究Redux，因为您正在管理许多项目的状态，而reducer可能会有所帮助。请说明您是如何使用

setState

更新

atlassian

属性的。忽略这些细节会让你更难知道自己做错了什么。我发布了一个答案，但我假设你遇到了这个问题。如果它是错误的，你应该展示你已经尝试过的帮助缩小问题范围的方法，尽管即使它是正确的，也会给其他发现这个问题的人提供信息，让他们看到最初的尝试与建议的解决方案形成对比。