Question

我现在正在尝试使用来自 redux 存储的数据调用 API。

假设我收到了 2 个 API 调用，Api A 和 Api B 在父组件中，我已经调用了 API A 并将数据保存在 redux 中。

现在我在另一个组件中。我需要打电话给Api B。但是 API B 有一个 params，我将从 API A 获得它。所以在第二个组件中，我使用 useEffect 钩子来调用数据。

为了从 redux 中获取参数，我使用了 useSelector Hook。

在第二个组件内部，UseEffect Hook 是这样的：

useEffect(() => {
      let splitText = cartList?.OrderDTO?.DeliveryCountry;
      let deliveryAddressId = splitText?.split(',');
      if (cartList.OrderDTO?.DeliveryCountry !== '') {
        dispatch(getShippingMethodById(token.access_token, deliveryAddressId));
      } else {
        dispatch(
          getShippingMethodById(
            token.access_token,
            cartList.OrderDTO?.CustomerAddressId,
          ),
    }
}, []);

所以在 useEffect 钩子中，我从 redux 获得了 deliveryAddressId。为了将 redux 中的数据绘制到组件中，我使用了 useSelector 钩子

let cartList = useSelector((state) => state.productReducer.cartList);

问题是当我试图在 undefined 钩子内访问它时，我总是得到 cartlist 的 useEffect

所以被调用的调度总是未定义。那么我该怎么做才能使这个钩子起作用？

Answer 1

您应该将 cartList 添加到您的依赖项数组中，以便 useEffect 钩子监视该状态的更新。正如现在所写，useEffect 仅在第一次渲染时运行，其中 cartList 可能是 undefined。 React - useEffect Docs

useEffect(() => {
      let splitText = cartList?.OrderDTO?.DeliveryCountry;
      let deliveryAddressId = splitText?.split(',');
      if (cartList.OrderDTO?.DeliveryCountry !== '') {
        dispatch(getShippingMethodById(token.access_token, deliveryAddressId));
      } else {
        dispatch(
          getShippingMethodById(
            token.access_token,
            cartList.OrderDTO?.CustomerAddressId,
          ),
    }
}, [cartList]); // Add 'cartList' to your dependency array here

Answer 2

解决方案是在依赖数组中添加 cartList。

useEffect(() => {
  // All your logic inside
}, [cartList]);

我没有关于完整父子组件结构的信息，但根据我对错误的理解，我可以解释这个问题。

您正在使用 []，作为 useEffect 依赖项，这意味着 useEffect 内的回调只会在组件挂载时触发一次。

可能是当您的组件挂载时，父级中的 API 调用未完成，而您仍然有 undefined 的 cartList。

<块引用>

要检查此假设，您可以在 API 响应中添加 console.log 并 useEffect 内。

你还能做什么？

在获得来自 API 调用的数据之前，您无法渲染子组件。

为什么在依赖项数组中添加 cartList 可以解决问题？

<块引用>

通过useEffect里面的依赖数组，你的useEffect回调将是每当依赖数组中的值更改 + 时调用安装。

因此，在挂载子组件时，会触发 useEffect 的回调（cartList as undefined），然后当 API 调用成功且数据被推入状态后，您的子组件将重新渲染并重新触发使用实际（您从 API 获得并推送到商店中）useEffect 数据在 cartList 内回调。

在 useEffect 钩子中使用 redux 数据

2 个答案: