如何摆脱有关缺少依赖项的警告

Question

我需要使用 useEffect 创建 compontentDidMount 效果。 当我总是想这样做时，我只是将空数组作为第二个参数传递。 现在我有一个关于缺少依赖项的警告，但我不想通过它。 我需要在安装组件时改变值。

const [values, setValues] = useState({})

useEffect(() => {
    const query = new URLSearchParams(props.location.search);
    const TempValues = {};
    for (let param of query.entries()) {
        TempValues[param[0]] = +param[1];
    }
    setValues(TempValues);
}, [])

Answer 1

尽管您可以在 setValues(TempValues); 下方使用// eslint-disable-next-line react-hooks/exhaustive-deps ; 陈述。 这不是一件非常明智的事情。 您应该在依赖数组中添加 props.location.search。

Answer 2

首先，请记住， linter 并不愚蠢，它总是希望防止您目前可能没有注意到的任何进一步的未知错误。 因此，使用以下特殊注释摆脱这种错误是不明智的：

// eslint-disable-next-line react-hooks/exhaustive-deps

首先，您应该始终在代码中查找未更改的值，在您的特定情况下，它可能是props.location.search或setValues因为我们不知道您如何在其他部分使用props.location.search代码（或 URI 本身），因此最好使用setValues和props.location组合。

所以它应该是这样的：

const [values, setValues] = useState({})

useEffect(() => {
    const query = new URLSearchParams(props.location.search);
    const TempValues = {};
    for (let param of query.entries()) {
        TempValues[param[0]] = +param[1];
    }
    setValues(TempValues);
}, [setValues, props.location])

但无论如何，如果你不关心这些东西，你可以使用eslint 详尽的-deps注释来使这项工作如你所愿。

const [values, setValues] = useState({})

useEffect(() => {
    const query = new URLSearchParams(props.location.search);
    const TempValues = {};
    for (let param of query.entries()) {
        TempValues[param[0]] = +param[1];
    }
    setValues(TempValues);
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

注意：请记住，在生产版本中将忽略警告。

更新

由于您有一个特殊的并且您希望在路线发生更改时保留您的数据以进行useRef而不是避免直接使用 props.location.search 。 因此，通过这种方法，我们将关注useEffect的第一个props.location变化，然后我们可以在其他useEffect中自由使用更新版本的props.location并访问其中的其他属性而无需任何关注，所以它不会因为我们没有依赖关系，所以重新启动任何东西。

const [values, setValues] = useState({})

const location = useRef(props.location);
useEffect(() => {
  location.current = location;
}, [location]);

useEffect(() => {
    const query = new URLSearchParams(location.current.search);
    const TempValues = {};
    for (let param of query.entries()) {
        TempValues[param[0]] = +param[1];
    }
    setValues(TempValues);
}, [])