道具更改时使用useEffect Hook更新状态时如何修复缺少的依赖警告答案

【问题标题】：How to fix missing dependency warning when using useEffect Hook to update state when props change道具更改时使用useEffect Hook更新状态时如何修复缺少的依赖警告
【发布时间】：2021-02-11 12:04:07
【问题描述】：

我的组件收到三个道具。 urlText 是一个字符串，setSelectedText 是一个 redux Action 从 connect() 和 clearPage 更新状态，这是另一个清除状态的 redux action。

我只想在 urlText 更改时更新状态。我想在卸载时清除状态。

 I get this eslint warning `react-hooks/exhaustive-deps: React Hook useEffect has missing dependencies: setSelectedText`

 warning `react-hooks/exhaustive-deps: React Hook useEffect has missing dependencies: clearPage`


const Component = ({ urlText, setSelectedText, clearPage }) => {
  useEffect(() => {
    setSelectedText(urlText);
  }, [urlText]);

  useEffect(() => {
    return () => {
      clearPage();
    };
  }, []);
};

【问题讨论】：

标签： reactjs redux use-effect

【解决方案1】：

它不会对脚本的运行方式产生任何影响，但 linter 会警告您将其更改为：

useEffect(() => {
    setSelectedText(
        urlText
    );
}, [setSelectedText, urlText]);

useEffect(() => {
    return () => {
        clearPage();
    };
}, [clearPage]);

虽然最后可以简化为：

useEffect(() => clearPage, clearPage);

【讨论】：