javascript - 异步函数进入 useEffect 在组件渲染后获取数据

Question

我使用 onGetAccount 函数获取登录用户的地址:

const [userWalletInfo, setUserWalletInfo] = useState()

         
  async function onGetAccount() {
    const account = await client.api.asset.getAccount();
    
    return account;
    
  }  
  useEffect(() => {
    async function fetchUserWalletInfo() {
      const address = await onGetAccount();
      
      setUserWalletInfo({
        address: address,
        
      });
    }
    fetchUserWalletInfo();
  }, []);

这样我就可以访问 userWalletInfo.address。

问题是，如果我加载组件，然后(我的意思是当组件在本地主机上运行时我在 VSCode 中编辑代码，我这样做是为了了解地址是否设置正确)我编辑 js。 文件添加:

<div> {userWalletInfo.address} </div>

它正确显示用户地址，但如果我刷新页面，我会收到“类型错误:无法读取未定义的属性‘地址’”。
由此我推断页面在 fetchUserWalletInfo() 用完之前呈现。

Answer 1

"TypeError: Cannot read property 'address' of undefined".

上面的错误消息本质上意味着他的 userWalletInfo 对象是 undefined 并且 undefined< 上没有 address 属性.

userWalletInfo 未定义的原因是因为您使用异步函数获取它，这意味着当您的 render() 首次执行时，userWalletInfo 仍然是 undefined。

为什么 userWalletInfo 在初始渲染时未定义？

因为，尽管您可能已经进行了异步函数调用，但异步函数不会在 Javascript 主线程上执行，而是在包含异步函数调用的代码行后立即发送到 WEB API 环境被执行。

但是，异步函数调用之外的代码仍然是同步的，这意味着它将执行并且不会等待异步调用完成并返回数据。

现在，为了不再出现此错误，您需要做的就是有一个条件语句。即，在尝试检索 address 属性以显示在 DOM 上之前，您需要检查 userWalletInfo 对象是否存在。

您可以通过多种方式做到这一点:

1. 有一个简单的 if 语句
2. 像这样使用可选的链接运算符 ?:userWalletInfo?.address(这就像一个 if 语句。但是这是 ES 2020 语法，因此您需要polyfill，如果你想支持旧浏览器)。
3. 像用户@Shimi 在她的回答中提到的那样使用短路。
4. 让 userWalletInfo 默认为空对象。 const [userWalletInfo] = useState({})。效果类似于可选链接，因为它可以防止访问 undefined 运行时错误的属性。

如果您想了解有关 Javascript 事件循环和异步函数调用如何工作的更多详细信息，请从此处阅读我的回答:How Async calls, event loop and callback queue work.