我有一组MongoDB ID.

const pId =  ['62b3968ad7cc2315f39450f3', '62b37f9b99b66e7287de2d44']

我使用for Each来分隔ID,如下所示:

pId.forEach((item)=>{
console.log(item)
})

但我有一个数据库(产品),我想从中获取数据.所以我试着

   const [product, setProduct] = useState([{}]);
useEffect(() => {
            pId?.forEach((item) => {
                const getProduct = async () => {
                    try {
                        const res = await userRequest.get("/products/find/" + item)
                        setProduct(res.data)
                    } catch (err) {
                        console.log(err)
                    }
                }
                getProduct()
            })
        }, [pId])

我使用useState[{}]是因为我想收集对象数组中的数据.

推荐答案

我使用useState[{}]是因为我想收集对象数组中的数据.

您的代码没有将对象收集到数组中.它将查询的每个结果设置为单个状态项(覆盖以前的结果).

如果您希望将所有元素都作为一个数组来获取,则构建一个数组;一种方法是使用map回调来提供每个元素的promise ,然后使用Promise.all等待所有这些promise 得到解决:

// The usual advice is to use plurals for arrays, not singulars ("products", not "product")
const [products, setProducts] = useState([]); // Start with an empty array
useEffect(() => {
    if (pId) {
        Promise.all(pId.map((item) => userRequest.get("/products/find/" + item)))
            .then((products) => setProducts(products))
            .catch((error) => console.log(error));
    }
}, [pId]);

请注意,如果pId个呼叫发生变化,而一个或多个userRequest.get个呼叫仍未完成,则您将进入竞争状态.如果userRequest.get提供了一种取消飞行中呼叫的方法(就像fetch一样),那么您将希望使用useEffect中的清理回调来取消飞行中呼叫.例如,if userRequest.get接受一个AbortSignal实例(与内置fetch类似),它将如下所示:

const [products, setProducts] = useState([]);
useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    if (pId) {
        Promise.all(pId.map((item) => userRequest.get("/products/find/" + item, { signal })))
            .then((products) => setProducts(products))
            .catch((error) => {
                if (!signal.aborted) {
                    console.log(error);
                }
            });
    }
    return () => {
        controller.abort();
    };
}, [pId]);

同样,这只是概念性的;userRequest.get可能不接受AbortSignal,或者可能接受不同的AbortSignal;其目标是展示如何使用useEffect的清理回调来取消先前的请求.

Javascript相关问答推荐

Promise.all立即跳到那时,而不是调用所有Promise

在shiny 模块中实现JavaScript

强制执行useStatego struct 化变量[foo,setFoo]的命名约定?

添加/删除时React图像上传重新渲染上传的图像

Flisk和JS错误:未捕获的Syntax错误:意外的令牌'<'

如何访问react路由v6加载器函数中的查询参数/搜索参数

为什么ngModel不能在最后一个版本的Angular 17上工作?'

如何使覆盖div与可水平滚动的父div相关?

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新?

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

在HTML语言中调用外部JavaScript文件中的函数

DOM不自动更新,尽管运行倒计时TS,JS

如何 for each 输入动态设置输入变更值

自定义确认组件未在vue.js的v菜单内打开

在JS中动态创建对象,并将其追加到HTML表中

如何在Press上重新启动EXPO-AV视频?

JavaScript:如果字符串不是A或B,则

如何使用抽屉屏幕及其子屏幕/组件的上下文?

Jexl to LowerCase()和Replace()

React Refs不与高阶组件(HOC)中的动态生成组件一起工作