带有异步函数的 useState 返回 Promise {<pending>}

Question

所以，我知道这个问题已经被问了 100 次，但在我的例子中似乎没有一个解决方案有效。

我正在使用useState钩子将状态更新为initialValues获取从getInitialValues函数返回的数据的值

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

该getInitialValues函数执行逻辑检查并返回一个对象或另一个函数retrieveDetails()

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

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

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它返回的状态时Promise {<pending>}？

即使删除 API 调用并简单地在其位置返回一个对象也会呈现相同的结果。

不确定实际返回对象的最佳方法？

任何帮助将不胜感激。

Answer 1

我认为没有办法useState异步获取初始数据，至少目前还没有。

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

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

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

您可以在DOCS 中阅读更多相关信息