使用 Redux 的 useEffect 竞争条件

Posted 2023-03-22

【中文标题】使用 Redux 的 useEffect 竞争条件

【英文标题】：useEffect race condition with Redux

【发布时间】：2021-10-10 20:29:18

【问题描述】：

您好，我在安装组件时一直在努力设置值。我正在使用 useEffect Hook 和 useDispatch、useSelector 来调用方法并从商店获取状态。 问题是来自商店的状态延迟了 1 次渲染，因此我需要在 useEffect 中运行两次代码才能获得我期望的行为。这是 -> 当组件加载时，进行 API 调用并列出一些文档。

数据声明

const data = useSelector(state => state.whole.manufactured);

使用效果代码

useEffect(() => 
    if (counter <= 1) 
      fetchData();
      setProducts(data);
      setCounter(counter + 1);
    

    console.log('data in store', data);
    console.log('useEffect');
  , [clickedItem, data]);

fetchData函数

const fetchData = async () => 
    await dispatch(get_manufacturing());
  ;

get_manufacturing

return dispatch => 
    dispatch(Actions.uiStartLoading());

    fetch('http://myapi/api/product/get-products', 
      method: 'GET',
      headers: Interceptor.getHeaders(),
    )
      .then(res => res.json())
      .then(result => 
        dispatch(Actions.uiStopLoading());

        if (result.status === true) 
          dispatch(type: TYPES.GET_MANUFACTURABLE, data: data);
        
      )
      .catch(error => 
        dispatch(Actions.uiStopLoading());
        console.log(error);
      );

当此代码运行时，会发生以下情况。

正如您在第一次渲染中看到的，它似乎完全忽略了 fetchData() 并继续到 console.log，在第二次渲染后，值已正确设置。我该如何解决这个问题，我没有正确完成某些事情吗？

【问题讨论】：

在依赖列表中包含计数器变量

【参考方案1】：

将依赖列表中的clickedItem替换为counter。

【讨论】：

需要clickedItem，如果“counter”值只是为了证明渲染被完成了两次。我实际上不需要那个变量