React中useAsync hook返回对象时属性取值为undefined问题求解

• 首先修正语法笔误
  你提供的代码中异步函数的return语句末尾错误写为小写字母l，而非语法要求的分号;，会直接导致函数无法正确返回预期对象，先修正该处错误：

// 错误写法
return {instances, resource_name}l
// 正确写法
return {instances, resource_name};

• 处理初始加载状态
  主流useAsync hook的初始状态下，value属性默认为undefined，只有异步函数执行完成、loading变为false后，value才会被赋值为异步函数的返回结果。你当前直接同步读取instanceData的属性时，异步逻辑还未执行完成，instanceData本身就是undefined，读取其属性自然返回undefined。

可以选择以下任意一种方式解决：

方式1：先判断加载状态，加载完成后再读取属性

const { value: instanceData, loading: isLoading } = useAsync(async () => {
  const instances = [];
  const resource_name = "hello";
  return {instances, resource_name};
}, []);

if (isLoading) {
  return <div>加载中...</div>
}
// 走到此处异步逻辑已经执行完成，instanceData存在对应值
const instances = instanceData.instances;
const resource_name = instanceData.resource_name;

方式2：解构时添加兜底默认值，兼容加载中状态

const { value: instanceData, loading: isLoading } = useAsync(async () => {
  const instances = [];
  const resource_name = "hello";
  return {instances, resource_name};
}, []);

// 兜底空对象避免读取undefined的属性报错
const { instances = [], resource_name = "" } = instanceData || {};

• 补充变量声明
  你异步函数内部的instances和resource_name没有添加const/let声明，如果上层作用域没有同名变量，会被自动挂载为全局变量，也可能引发非预期的赋值问题，建议补充变量声明。

内容的提问来源于stack exchange，提问作者tsaebeht