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

虽然可以使用 // eslint-disable-next-line react-hooks/exhaustive-deps 在setValues（TempValues）的正下方；声明。这不是一个非常明智的选择。您应该在依赖项数组中添加props.location.search。

Answer 2

首先，请记住，线性不是笨拙的，它一直在努力防止当前您可能没有注意到的其他未知错误。因此，通过特殊注释来消除此类错误是不明智的：

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

首先，您应该始终在代码中寻找不变的值，在您的特定情况下，它可能是props.location.search或setValues，因为我们不知道您如何在代码的其他部分（或URI本身）中使用props.location.search，所以最好使用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详尽描述注释来按需进行此工作。

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。因此，通过这种方法，我们将密切注意第一个props.location的{{1}}更改，然后可以通过访问其他useEffect自由使用其他props.location中useEffect的更新版本。其中的其他属性没有任何关系，因此它不会重新启动，因为我们没有依赖性。

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);
}, [])

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

2 个答案:

更新