Reactjs 在useEffect挂钩中使用redux数据_Reactjs_React Native_Redux_React Redux

Reactjs 在useEffect挂钩中使用redux数据

reactjs react-native redux

Reactjs 在useEffect挂钩中使用redux数据,reactjs,react-native,redux,react-redux,Reactjs,React Native,Redux,React Redux,我现在尝试使用redux存储中的数据调用API 假设我在父组件中得到了两个API调用，APIA和APIB，我已经调用了APIA，并将数据保存在redux中现在我在另一个组件中。我需要调用APIB。但是API B有一个params，我将从API a中得到它。在第二个组件中，我使用useffecthook调用数据要从redux获取参数，我使用useSelectorHook 在第二个组件中，UseEffect钩子是这样的： useEffect(() => { let splitT

我现在尝试使用redux存储中的数据调用API

假设我在父组件中得到了两个API调用，

APIA

和

APIB

，我已经调用了

APIA

，并将数据保存在redux中

现在我在另一个组件中。我需要调用

APIB

。但是API B有一个

params

，我将从

API a

中得到它。在第二个组件中，我使用

useffect

hook调用数据

要从redux获取参数，我使用

useSelector

Hook

在第二个组件中，UseEffect钩子是这样的：

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,
          ),
    }
}, []);

因此，在

useffect

hook中，我从redux获得了

deliveryAddressId

。为了将数据从redux中提取到组件中，我使用了

useSelector

hook

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

问题是当我试图在

useffect

钩子中访问

cartlist

时，我总是得到

undefined

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

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

您应该将

cartList

添加到依赖项数组中，这样

useffect

钩子就可以监视该状态的更新。正如现在编写的那样，

useffect

仅在第一次渲染时运行，其中

cartList

可能是

未定义的。

useffect（（）=>{
让splitText=cartList？.OrderDTO？.DeliveryCountry；
让deliveryAddressId=splitText？.split（'，'）；
如果（cartList.OrderDTO？.DeliveryCountry！=''）{
分派（getShippingMethodById（token.access_token，deliveryAddressId））；
}否则{
派遣(
getShippingMethodById(
token.access\u token，
cartList.OrderDTO？.CustomerAddressId，
),
}
}，[cartList]）；//在此处将“cartList”添加到依赖项数组中
您应该将cartList
添加到依赖项数组中，以便useffect
钩子监视该状态的更新。正如现在编写的那样，useffect
仅在第一次渲染时运行，其中cartList
可能是未定义的。

useffect（（）=>{
让splitText=cartList？.OrderDTO？.DeliveryCountry；
让deliveryAddressId=splitText？.split（'，'）；
如果（cartList.OrderDTO？.DeliveryCountry！=''）{
分派（getShippingMethodById（token.access_token，deliveryAddressId））；
}否则{
派遣(
getShippingMethodById(
token.access\u token，
cartList.OrderDTO？.CustomerAddressId，
),
}
}，[cartList]）；//在此处将“cartList”添加到依赖项数组中
解决方案是在依赖项数组中添加cartList

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

我没有关于完整的父子组件结构的信息，但根据我对错误的理解，我可以解释这个问题
对于useffect
依赖项，您正在使用[]
，这意味着useffect
内部的回调在组件装载时只会触发一次
安装组件时，父组件中的API调用可能未完成，并且您仍有cartList
的undefined

要检查此假设，您可以在API响应中添加console.log，然后
在useffect
中
你还能做什么
只有从API调用获得数据，才能呈现子组件
为什么在依赖项数组中添加cartList
，解决了这个问题？
通过useEffect中的依赖项数组，您的useEffect回调将
每当依赖项数组中的值在
坐骑
因此，在挂载子组件时，将触发useEffect的回调（cartList为undefined），然后当API调用成功并且数据被推入状态后，您的子组件将重新加载，并在useEffect
中使用实际值（您从API获得并在存储中推入的值）重新触发回调cartList
数据。
解决方案是在依赖项数组中添加cartList

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

我没有关于完整的父子组件结构的信息，但根据我对错误的理解，我可以解释这个问题
对于useffect
依赖项，您正在使用[]
，这意味着useffect
内部的回调在组件装载时只会触发一次
安装组件时，父组件中的API调用可能未完成，并且您仍有cartList
的undefined

要检查此假设，您可以在API响应中添加console.log，然后
在useffect
中
你还能做什么
只有从API调用获得数据，才能呈现子组件
为什么在依赖项数组中添加cartList
，解决了这个问题？
通过useEffect中的依赖项数组，您的useEffect回调将
每当依赖项数组中的值在
坐骑
因此，在挂载子组件时，将触发useEffect的回调（cartList为undefined），然后当API调用成功并且数据被推入状态后，您的子组件将重新加载，并在useEffect
中使用实际值（您从API获得并在存储中推入的值）重新触发回调cartList
数据。
您需要在useffect依赖性数组中添加cartList
您需要在useffect依赖性数组中添加cartList