Question

我正在使用useEffect，我只需要“侦听”一种状态下的更改，但可以使用另一种状态而不包含它。

const [users, setUsers] = useState(["Mike"]);
const [message, setMessage] = useState();

useEffect(() => {
    users.length > 0 && setMessage("we have users"!)
}, [users])

setMessage("hello!") // If I add this dependency to the previous useEffect it will trigger. but I will only need it to trigger on users change
setUsers(["john", "mary"])

执行此React将抱怨setMessage依赖项如果我只听一个状态，useState的正确用法是什么？

我最终使用了。不确定是否是最好的方法。我只是分享我的尝试：）

useEffect(() => {
    users.length > 0 && functionIWantToExecuteOnceWithoutDependencies()
}, [users])

Answer 1

eslint发出警告，表明您错过了添加setMessage作为依赖项。但是在您的情况下，看来setMessage是一个状态设置器，不会因为您的渲染周期而改变。因此，您可以忽略eslint警告或禁用该警告。

您可以disable the warning这样：

useEffect(
    () => {
      users.length > 0 && setMessage("we have users"!)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [users],
  );

Answer 2

只需添加setMessage作为依赖项即可。 react hook linter将其视为一个调用函数，但是由于setMessage是从useState钩子创建的函数，因此它是一个稳定的引用，因此不会触发任何效果。

您可以根据需要禁用每行的皮棉规则，但是通常不建议这样做。您可能会在更新效果的情况下出现这种情况，但是由于禁用了依赖项数组linting，您可能会引入逻辑错误。

将useEffect执行限制为仅一个依赖项

2 个答案: