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

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

首先，请记住，linter 并不愚蠢，它总是在寻找防止您目前可能没有注意到的任何进一步未知错误。因此，通过特殊评论摆脱此类错误是不明智的：

// 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 详尽的 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。因此，通过这种方法，我们将关注第一个useEffectprops.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);
}, [])

Answer 2

虽然你可以使用// eslint-disable-next-line react-hooks/exhaustive-deps就在设置值(TempValues(的正下方;陈述。 这不是一件非常可取的事情。 您应该在依赖项数组中添加 props.location.search。