组件渲染后将异步函数转换为 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>

它正确显示用户地址，但如果我刷新页面，我会得到“TypeError: Cannot read property 'address' of undefined”。
由此我推断页面是在fetchUserWalletInfo()用完之前渲染的。

Answer 1

“TypeError: 无法读取未定义的属性‘地址’”。

上面的错误信息本质上的意思是他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. 使用Short-circuiting 就像用户@Shimi 在她的回答中提到的那样。
4. 让userWalletInfo 默认为空对象。 const [userWalletInfo] = useState({})。效果类似于可选链接，因为它阻止了访问undefined 运行时错误的属性。

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

Answer 2

将您的 div 更改为仅在 userWalletInfo 有地址时显示，这将避免渲染函数尝试访问未定义对象的属性。

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

更多细节：

一开始userWalletInfo 是未定义的，因此尝试访问其地址将导致您遇到的错误。

在userWalletInfo 中有填充值之前调用渲染函数（即您的 div），因为填充发生在异步调用上，并且 React 渲染尝试渲染组件而不管可能发生的异步调用在后台。

提供的解决方案有效，因为它在尝试显示userWalletInfo时提供了额外的谨慎，它只会在userWalletInfo未未定义时尝试访问userWalletInfo地址，从而解决之前渲染函数的失败该值已填充。