将空数组作为第二个参数传递时，React Hook useEffect缺少依赖项

Question

我的功能组件中有以下useffecthook，我只想使用一次（当组件挂载时），以便从API加载一些数据：

const Gear = () => {
  const [weaponOptions, setWeaponOptions] = useState([
    {
      key: "0",
      label: "",
      value: "null"
    }
  ]);
  const [weapon, setWeapon] = useState("null");

  useEffect(() => {
    console.log("Gear.tsx useEffect");

    const fetchWeaponsOptions = async (): Promise<void> => {
      const weaponsData = await getWeapons();
      const newWeaponOptions: DropdownOptionType[] = [
        ...weaponOptions,
        ...weaponsData.html" target="_blank">map(({ id, name }) => {
          return {
            key: id,
            label: name,
            value: id
          };
        })
      ];
      setWeaponOptions(newWeaponOptions);
    };

    fetchWeaponsOptions();
  }, []);

  // TODO add weapon dropdown on change, selected weapon state
  const handleWeaponChange = ({ value }: DropdownOptionType): void => {
    setWeapon(value);
  };

  return (
    <div>
      <h2>Gear:</h2>
      <Dropdown
        defaultValue={weapon}
        label="Weapon"
        name="weapon"
        options={weaponOptions}
        onChange={handleWeaponChange}
      />
    </div>
  );
};

React留档说明，当您只希望效果在挂载卸载时运行时，这是有效的做法：

如果您想运行一个效果并只清除它一次（在挂载和卸载时），您可以传递一个空数组（[]）作为第二个参数。这告诉React，你的效果不依赖于道具或状态的任何值，所以它永远不需要重新运行。这不是作为特例处理的——它直接遵循依赖数组的工作方式。

但我收到了以下create react应用程序linter警告：

35:6警告React Hook use效应有一个缺失的依赖项：武器选项。要么包含它，要么删除依赖数组report-追踪器/穷举-deps

如果我将其作为依赖项传递，则当武器选项数组发生更改时，会触发use效应，因为钩子本身会更改武器选项状态，从而导致无休止的循环。如果我省略空数组参数，也会发生同样的事情。

这里的正确方法是什么？

Answer 1

正如你所看到的，这不是一个错误，而是一个警告。React告诉您正在使用weaponOptions内部useffect，但您没有将其作为依赖项传递。同样，这只是一个警告，你不必这么做。

Answer 2

我只想使用一次（当组件挂载时），以便从API加载一些数据

因此，根据您的逻辑，您不需要依赖组件的状态：

const INITIAL = [
  {
    key: '0',
    label: '',
    value: 'null'
  }
];

const App = () => {
  const [weaponOptions, setWeaponOptions] = useState(INITIAL);

  useEffect(() => {
    const fetchWeaponsOptions = async () => {
      const weaponsData = await getWeapons();
      const weaponsOptions = [
        ...INITIAL, // No state dependency needed
        ...weaponsData.map(({ id, name }) => {
          return {
            key: id,
            label: name,
            value: id
          };
        })
      ];
      setWeaponOptions(weaponsOptions);
    };

  }, []);

  return <></>;
};

但是，当您想使用useffect一次时，使用布尔引用是很常见的，这取决于一个状态，如下所示：

const App = () => {
  const [weaponOptions, setWeaponOptions] = useState(INITIAL);

  const isFirstFetch = useRef(true);

  useEffect(() => {
    const fetchWeaponsOptions = async () => {...}

    if (isFirstFetch.current) {
      fetchWeaponsOptions();
      isFirstFetch.current = false;
    }
  }, [weaponOptions]);

  return <></>;
};