在 useEffect 挂钩中使用 redux 数据答案

【问题标题】：Using redux data in the useEffect hooks在 useEffect 挂钩中使用 redux 数据
【发布时间】：2021-07-19 19:39:23
【问题描述】：

我现在正在尝试使用来自 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 hook

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

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

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

【问题讨论】：

需要在useEffect依赖数组中添加cartlist

标签： reactjs react-native redux react-redux

【解决方案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

【讨论】：

【解决方案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调用成功并且数据被推入状态后，你的子组件会重新渲染并重新触发在useEffect 内回调实际（您从 API 获得并推送到存储中）cartList 数据。

【讨论】：