带有异步功能的useState返回Promise {{pending>} [英] useState with async function returning Promise {<pending>}

问题描述

所以，我知道这个问题已经问了100遍了，但是在我的情况下，所有解决方案似乎都不起作用.

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

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

getInitialValues 函数进行逻辑检查，然后返回一个对象或另一个函数 retrieveDetails()

  const getInitialValues =()=>{让细节；if(！addressDetails){详细信息= resolveDetails();} 别的 {详细信息= {...，...，...};}返回详细信息；} 

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

  const extractDetails = async()=>{const addr = addressDetails [currentAddress];const {addressLookup} = addr;const key = process.env.API_KEY;const query =`?Key = $ {key}& Id = $ {addressLookup}`;const addrDetails =等待新的AddrService().getAddressDetails(query);返回addrDetails;} 

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

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

不确定围绕此方法返回实际对象的最佳方法吗?

任何帮助将不胜感激.

解决方案

我不认为有一种方法可以(至少到目前为止)异步地将初始数据异步传输到 useState .

React不等待您的数据到达，当异步操作排队(在事件循环侧)时，该功能将继续运行直至完成.

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

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

您可以在 DOCS

So, I know this question has been asked 100's of times, but none of the solutions seems to work in my instance.

I am using useState hook to update state to a value initialValues that gets data returned from a getInitialValues function

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

The getInitialValues function does a logic check and either returns an object or another function retrieveDetails()

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

The function, retrieveDetails is an async function that makes an API call, and I await the response and return the object received from the response.

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;
}

However, when I log the state initialValues it returns Promise {<pending>}?

Even removing the API call and simple returning an object in it's place renders the same result.

Not sure the best way around this to actually return the object?

Any help would be greatly appreciated.

解决方案

I don't think there is a way to get initial data to useState asynchronously, at least not yet.

React is not waiting for your data to arrive, the function will keep on running to completion while your async operation is queued (on the event loop side).

The current idiomatic way is to fetch the data in an effect and update the state.

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

You can read more about it in the DOCS

这篇关于带有异步功能的useState返回Promise {{pending>}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！