时间戳

首页 > 解决方案 > 使用 Redux 的 useEffect 竞争条件

reactjs - 使用 Redux 的 useEffect 竞争条件

问题描述

您好，我在安装组件时一直在努力设置值。我正在使用 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]);

获取数据函数

const fetchData = async () => {
    await dispatch(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，在第二次渲染之后，值已正确设置。我该如何解决这个问题，是否有一些我没有正确完成的事情？

标签： reactjsreact-nativereact-reduxreact-hooks

解决方案

clickedItem在依赖项列表中替换为counter.

推荐阅读