Question

我从这两个 useEffects 收到两个警告。我正在学习 React.js，这是我第一次处理这个问题。

const fetchShippingCountries = async (checkoutTokenId) => {
    const { countries } = await commerce.services.localeListShippingCountries(checkoutTokenId)

useEffect(() => {
    fetchShippingCountries(checkoutToken.id);
  }, []);

const fetchShippingOptions = async (checkoutTokenId, country, region = null) => {
    const options = await commerce.checkout.getShippingOptions(checkoutTokenId, { country, region });

    setShippingOptions(options);
    setShippingOption(options[0].id);
  }

useEffect(() => {
    if(shippingSubdivision) fetchShippingOptions(checkoutToken.id, shippingCountry, shippingSubdivision);
  }, [shippingSubdivision]);

React Hook useEffect 缺少依赖项：'checkoutToken.id'。包括它或删除依赖数组
React Hook useEffect 缺少依赖项：“checkoutToken.id”和“shippingCountry”。包括它们或删除依赖数组

Answer 1

React 要求您将 'checkoutToken.id' 和 'shippingCountry' 变量传递到 useEffect 依赖项数组中。每当依赖数组中的变量发生变化时，都会调用 useEffect。由于您在 useEffect 中使用这两个变量，React 会警告您更改它们不会触发 useEffect。

将 useEffect 函数使用的所有变量添加到依赖项数组是最佳实践的一部分。这是为了确保您可以完全控制 React 应用中的更改。

您如何解决“React Hook useEffect 缺少依赖项：”警告？

1 个答案: