Question

我的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的响应时，我想显示一个加载图标。

我尝试为每个atlassian添加googleAccounts属性。这种方法的问题在于，每次抓取googleAccounts帐户时，我都必须更新整个atlassian。因此，单独的调用会同时更新googleAccounts并覆盖彼此的更改。我想在函数中直接改变DOM，但我读到这被认为是不安全的。我不确定我最好的选择是什么，任何建议将不胜感激。

Answer 1

您可以将更新程序功能传递给setState。

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

这样您就无法在多个API回调中访问this.state，而是在更改之前始终接收当前的最新状态。您的回调可能会覆盖彼此的更改，因为它们是从相同的原始状态快照开始的，而不是考虑现有的状态更改（如果您不使用，则无法执行此操作更新程序功能，因为您无法访问中间状态。）

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

1 个答案: