React :包含一些依赖项，但忽略另一些依赖项

Question

我使用的useEffect包含在依赖数组中的几个依赖项，这些依赖项同时也是道具。我想忽略一些依赖项(即pros.b)，当这些依赖项发生变化时，这些依赖项会导致我的页面呈现；但是，我必须包括一个依赖项数组，因为我希望我的useEffect侦听其他依赖项(即pros.a)。这是我的代码非常非常简单：

const MyFunction(props){
  const [c,setC] = useState([])
  useEffect(()=>{
      if (props.a){
        let c0;
        props.b.forEach((item)=>{
          c0 = [...,c0.x]
        })
        setC(c0)
      }
      
  ,[props.a])
  return (
    <div>
      <OtherComponent
         c={c}      
      />
    </div>
  )
}

我不知道如何在没有得到警告的情况下进行，因为我确实需要忽略Pros.b而不是pros.a。

Answer 1

useEffect接受一个函数和一个依赖项数组。该函数创建一个闭包(将变量中的变量设置为当前值)，因此您确实希望任何变量都位于依赖项列表中，因为如果该变量发生更改，则需要重新创建整个函数。否则你就很难找到虫子了。

把所有的道具都给我，没关系。因为"c“是一个数组，所以也要传入'c‘，而不是”setC(.)“你只需要c.push(.)添加到数组中。

最后，如果您的应用程序以严格模式包装，那么组件将连续呈现两次。这是为了防止你有副作用。如果您删除(暂时)严格模式并查看您的控制台日志，事情可能会如您所期望的那样。

Answer 2

如果您使用eslint，我建议您添加这些注释来忽略依赖

useEffect(()=>{
      if (props.a){
        let c0;
        props.b.forEach((item)=>{
          c0 = [...,c0.x]
        })
        setC(c0)
      }
   // eslint-disable-next-line react-hooks/exhaustive-deps
  ,[props.a])

如果要永久禁用该行为，可以修改.eslintrc。

// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", 
    "react-hooks/exhaustive-deps": "off" //Set it `off`
  }
}

但是你需要记住，react-hooks/exhaustive-deps就像你的钩子的安全守卫。如果永久禁用它，可能会导致一些意外的错误。我建议您使用第一种方法，即只禁用对所需行的依赖检查。

Answer 3

发出这样的警告并不是错误。之所以会发生这种情况，是因为您在useEffect中使用了useEffect。避免警告，并与您的代码。不会有什么问题的。