您如何修正React缺少的依赖项：“警告”？

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 useEffect缺少一个依赖项：'checkoutToken.id‘。要么包含它，要么删除依赖数组
• React缺少依赖项：“checkoutToken.id”和“shippingCountry”。包含它们或删除依赖数组

。

Answer 1

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

将useEffect函数使用的所有变量添加到依赖数组中是最佳实践的一部分。这是为了确保您保持完全控制的变化，在您的反应应用程序。