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

Question

Trying to dispatch an action but i got this error in my terminal.

ERROR: React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array

yet my code wont render on the screen.

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

This is a linting rule exhaustive-deps . The purpose is to get you to only use props or state variables used in your second argument.

Because your second argument does not include dispatch you are getting an error. If you add dispatch to your second argument that should go away.

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

The downside to this is that, your effect will run whenever your userData or dispatch changes. You can ignore this rule with // eslint-disable-next-line react-hooks/exhaustive-deps .