使用异步函数返回 Promise {<pending>} 的 useState

Question

所以，我知道这个问题已被问过 100 多次，但 none 的解决方案似乎适用于我的实例。

我正在使用 useState 挂钩将状态更新为值 initialValues，该值 return 从 getInitialValues 函数

获取数据

const [initialValues, setInitialValues] = useState(getInitialValues());

getInitialValues 函数进行逻辑检查，return 是一个对象或另一个函数 retrieveDetails()

const getInitialValues = () => {
   let details;
   if(!addressDetails) {
      details = retrieveDetails();
   } else {
      details = { 
         ...,
         ...,
         ...
      };
   }
   return details;
}

函数 retrieveDetails 是一个进行 API 调用的异步函数，我等待响应和 return 从响应中收到的对象。

const retrieveDetails = async () => {
   const addr = addressDetails[currentAddress];
   const { addressLookup } = addr;
   const key = process.env.API_KEY;
   const query = `?Key=${key}&Id=${addressLookup}`;
   const addrDetails = await new AddrService().getAddressDetails(query);
   return addrDetails;
}

但是，当我记录状态时 initialValues 它 returns Promise {<pending>}?

即使删除 API 调用并简单地 return 放置一个对象也会呈现相同的结果。

不确定真正 return 对象的最佳方法？

如有任何帮助，我们将不胜感激。

Answer 1

我认为没有办法将初始数据异步获取到 useState，至少现在还没有。

React 不会等待您的数据到达，当您的异步操作排队（在事件循环端）时，该函数将继续运行完成。

当前惯用的方法是获取效果中的数据并更新状态。

useEffect(() => {
  getData(someParam).then(data => setState(data))
}, [someParam])

您可以在 DOCS

中阅读更多相关信息

Answer 2

const retrieveDetails = async () => {
   const addr = addressDetails[currentAddress];
   const { addressLookup } = addr;
   const key = process.env.API_KEY;
   const query = `?Key=${key}&Id=${addressLookup}`;
   const addrDetails = await Promise.resolve(new AddrService().getAddressDetails(query))
   return addrDetails;
}


**try this once changed the function a bit**

使用异步函数返回 Promise {<pending>} 的 useState

useState with async function returning Promise {<pending>}

javascript

promise

async-await

reactjs

es6-promise