Question

尝试调度操作，但我在终端中收到此错误。

错误：React Hook useEffect缺少依赖项：'dispatch'。包括它或删除依赖项数组

但是我的代码无法在屏幕上呈现。

function CartPage(props) {
  const dispatch = useDispatch();
  const [Total, setTotal] = useState(0);
  const [ShowTotal, setShowTotal] = useState(false);
  const [ShowSuccess, setShowSuccess] = useState(false);

  useEffect(() => {
    let cartItems = [];
    if (props.user.userData && props.user.userData.cart) {
      if (props.user.userData.cart.length > 0) {
        props.user.userData.cart.forEach((item) => {
          cartItems.push(item.id);
        });
        dispatch(getCartItems(cartItems, props.user.userData.cart)).then(
          (response) => {
            if (response.payload.length > 0) {
              calculateTotal(response.payload);
            }
          },
        );
      }
    }
  }, [props.user.userData]);
}

Answer 1

这是一条规则exhaustive-deps。目的是让您仅使用第二个参数中使用的道具或状态变量。

因为第二个参数不包含dispatch，所以您遇到了错误。如果您将调度添加到第二个参数，则该参数将消失。

useEffect(() => {
  // your logic here 
}, [props.user.userData, dispatch])

此方法的缺点是，只要您的userData或dispatch发生变化，效果就会运行。您可以使用// eslint-disable-next-line react-hooks/exhaustive-deps忽略此规则。

错误：React Hook useEffect缺少依赖项：'dispatch'。包括它或删除依赖项数组

1 个答案: