如何在地图函数中调用 useQuery？

Question

我有以下反应组件，它根据购物车中的项目从 mongodb 集合中删除产品。运行代码时出现此错误：

组件：

 function AddOrder() {
    const d = new Date();
    let text = d.toString();
    const { currentUser } = useContext(AuthContext);

    const { data, loading, error } = useQuery(queries.GET_USER_BY_ID, {
        fetchPolicy: "network-only",
        variables: {
            id: currentUser.uid,
        },
    });

    const getUserOrders = useQuery(queries.GET_USER_ORDERS, {
        fetchPolicy: "network-only",
        variables: {
            userId: currentUser.uid,
        },
    });

    const [addOrder] = useMutation(queries.ADD_ORDER);
   
    const [editProduct] = useMutation(queries.EDIT_PRODUCT);
    

    if (error) {
        return <h1> error</h1>;
    } else if (loading) {
        return <h1> loading</h1>;
    } else if (data && getUserOrders.data && currentUser && data.getUser.cart.length > 0) {
        let newCart = [];
        for (let i = 0; i < data.getUser.cart.length; i++) {
            newCart.push({ quantity: data.getUser.cart[i].quantity, _id: data.getUser.cart[i]._id });
        }

        addOrder({
            variables: {
                userId: currentUser.uid,
                status: "ordered",
                createdAt: text,
                products: newCart,
                flag: getUserOrders.data.userOrders.length + 1,
            },
        });
        
        newCart.map((x) => {
            let getProd = useQuery(queries.GET_PRODUCTS_BY_ID, {
                fetchPolicy: "network-only",
                variables: {
                    _id : x._id
                },
            });
            let a = getProd.quantity -x.quantity
            editProduct({
                variables: {
                    _id : x._id,
                    quantity: a
                },
            });
        })
    
    }
}
export default AddOrder;

我得到的错误是：

React Hook "useQuery" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

我尝试将 map 函数添加为内部函数，但这也无济于事。我该如何解决这个问题？

Answer 1

需要在每次渲染时调用 Hooks 以确保确定性一致，并且 React 在每次构建时都会对此进行检查（并在检测到时抛出错误）。如果钩子不在 React 组件的顶部/主调用堆栈中，则可能会出现问题。

你可以做的是创建另一个在你的地图函数中呈现的 React 组件。这个 React 组件不需要渲染任何东西，你只需添加代码并返回 null。

尝试在你的组件上方添加这个：

function EditProduct({ x ) {
  const [editProduct] = useMutation(queries.EDIT_PRODUCT);
  let getProd = useQuery(queries.GET_PRODUCTS_BY_ID, {
    fetchPolicy: "network-only",
    variables: {
      _id : x._id
    },
  });
  let a = getProd.quantity -x.quantity
  editProduct({
    variables: {
      _id : x._id,
      quantity: a
    },
  });
  return null;
}

然后将您的地图使用情况更新为：

newCart.map((x) => <EditProduct x={x} />)

了解在每次渲染满足您的if else 条件的AddOrder 时，EditProduct 组件将重新渲染，这将调用钩子并可能导致意想不到的后果（例如多次发出相同的获取请求，如果钩子是这样设计的）。我没有使用你的特定钩子，所以我不能肯定，但这是要考虑的事情。

Answer 2

你太有才了！ 多亏了你，我才能解决我的问题。