我的 React useState 不能立即在 useEffect 中设置对象。有人能帮我吗？

Posted 2023-02-23

【中文标题】我的 React useState 不能立即在 useEffect 中设置对象。有人能帮我吗？

【英文标题】：My React useState can't set object immediately in useEffect. Can someone help me?

【发布时间】：2020-04-24 14:17:32

【问题描述】：

感谢您的关注。我正在使用 laravel mix 开发一个以React.js 作为前端的Laravel 网站。我正在尝试加载应该由从React.useEffect 获取的数据呈现的对象，以设置我的一些 React.useState。我试图测试 set 函数，但不是第一次尝试获取对象。当我运行程序时，它显示“组件为空”。下面我插入了sn-p。你能帮帮我吗？

function Users() 
  const [users, setUsers] = React.useState([]);
  const [rolesDict, setRoles] = React.useState();

  React.useEffect(() => 
          const fetch = async () => 
              setFetchStatus(SUBMIT_LOADING);
              try 
                  const [usersResponse, rolesResponse] = await Promise.all([
                      rootApi.get('/users'),
                      rootApi.get('/roles'),
                  ]);
                  setRoles(_.mapKeys(rolesResponse.data, 'code'));
                  setUsers(usersResponse.data);
                  setFetchStatus(SUBMIT_DONE);
               catch (error) 
                  console.log(error);
                  setFetchStatus(SUBMIT_FAIL);
              
          ;
          fetch();
      , []);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

问题出在哪里？什么不工作？

@EmileBergeron 对象不是通过我的 http 调用立即设置的

@dinorain “立即”是什么意思？ API 调用需要时间并且是异步的，状态更新也是异步的。两者都不是即时的

@Jayce444 是的，我想将这些调用返回的数据呈现到我的 React 组件中。它会导致错误“组件为空”。您对此有任何解决方案或替代方案吗？

你没有显示失败的部分，没有minimal reproducible example很难帮助。

【参考方案1】：

http 调用是asynchrouns 尝试在set 函数上使用async 和await