javascript - useLazyQuery 在循环和 promise.all 中不起作用
问题描述
我有一个数据数组(由日期组成),需要为其中的每个日期运行一个 graphql 查询。为数组中的每个日期解析的承诺应该返回新数据,我想将它推送到 react 组件的本地状态。
但不知何故,该函数只返回数组最后一个元素的数据。
...
const [
getInvoiceByDateQuery,
{ loading: getInvoiceByDateQueryLoading, data: getInvoiceByDateQueryData },
] = useLazyQuery(GET_INVOICES_BY_DATA, {
onCompleted({ getInvoicesByDate }) {
console.log({ getInvoicesByDate });
const invoiceList = [...state.invoiceList];
invoiceList.push(getInvoicesByDate[0]);
_setState({
invoiceList,
});
},
});
...
useEffect(async () => {
if (!!state.currentWeek.length) {
await Promise.all(
state.currentWeek.map(day => {
console.log(day);
return getInvoiceByDateQuery({
variables: {
date: day,
},
});
}),
);
}
}, []);
我浏览了graphql文档,它说useLazyQuery
也没有返回任何承诺useMutation
。所以,在我的useEffect
钩子 Promise.all 中总是会返回void
。
我希望使用onCompleted
返回回调useLazyQuery
并更新本地状态。
我尝试在地图迭代器中使用控制台,它成功地在控制台中为数组中的每个元素打印日期,但不知何故,函数只为最后一个元素运行。
即使检查网络选项卡,我也看到查询只运行一次。
我也尝试了以下代码,但没有任何效果-
useEffect(() => {
if (!!state.currentWeek.length) {
state.currentWeek.map(day =>
getInvoiceByDateQuery({
variables: {
date: day,
},
}),
);
}
}, []);
解决方案
每个 Apollo 钩子都会创建一个“实例”,旨在一次提供一个操作(“数据槽”)。
...应该返回新数据,我想将它推送到 react 组件的本地状态。
通常 [也许在这个用例中也是如此]不需要将数据复制到状态中(数据复制)。
在 React 中,您应该考虑许多<Day/>
组件,每个组件都为自己读取数据,渲染与日期相关的数据,提供指向日期详细信息页面/视图/等的链接。
当然,每个<Day/>
组件都可以将获取的数据返回给父组件,只需使用 in 调用的一些处理程序 fn(和 id/index 道具)渲染它onCompleted
。
推荐阅读
- kotlin - 协程作用域被取消后,还能再使用吗?
- javascript - 在 plotly.js 中为具有缺失点的分类数据自定义轴
- reactjs - TypeScript 错误 TS2322:类型“选项”不可分配给类型“(字符串和选项)| (号码和选项)| (只读字符串 [] & 选项)'
- c++ - 关于阅读部分输入的问题
- javascript - 是否可以使用构建过程随机散列类?
- angular - 使用 Angular 管道将日期转换为特定格式
- r - R knitr kable 先按一列排序行,然后再按另一列
- node.js - 使用 Node.js 将大型 CSV 文件插入 Postgres
- sql - 如何在 SQL Server 中获取给定月份范围内按月份分组的周末总天数?
- python - 在第二次尝试获取正确的用户输入后,循环缩进