javascript - useState 与异步函数返回 Promise {}
问题描述
所以,我知道这个问题已经被问了 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 调用并简单地返回一个对象,也会呈现相同的结果。
不确定实际返回对象的最佳方法是什么?
任何帮助将不胜感激。
解决方案
我不认为有一种方法可以useState
异步获取初始数据,至少现在还没有。
React 不会等待您的数据到达,当您的异步操作排队(在事件循环端)时,该函数将继续运行直到完成。
当前惯用的方式是在效果中获取数据并更新状态。
useEffect(() => {
getData(someParam).then(data => setState(data))
}, [someParam])
您可以在DOCS中阅读有关它的更多信息
推荐阅读
- python - tf-nightly-gpu 在整个训练过程中的性能下降
- javascript - Vuex 状态中的 Javascript 类中缺少方法
- c++ - 使用另一个结构构建链接列表 - 附加函数运行时错误
- javascript - 如何渲染类组件?
- r - 如何采样实数?
- java - 矩形节点的 Graphviz (Java) 标签写在节点的末端
- reactjs - Webpack 5 DependOn 仅在条目仅依赖于一个依赖项时才有效
- wordpress - WordPress WooCommerce - 禁用“我的帐户”屏幕并允许用户转到 wp-admin
- java - 为什么我们不在 bindView 中使用 moveToFirst()?
- android - 安卓。从两个 RecyclerView 向数据库发送请求并在第三个 RecyclerView 中接收数据