使用 Redux 的 useEffect 竞争条件

Question

您好，我在安装组件时一直在努力设置值。我正在使用 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，在第二次渲染后，值已正确设置。我该如何解决这个问题，我没有正确完成某些事情吗？

Answer 1

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