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

中了解更多信息

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**

带有异步功能的useState返回Promise {<pending>}

2 个答案: