Reactjs React Hook useEffect缺少依赖项：'；类别'；（材质ui样式和反应引导提示）

我有一个警告：“React Hook useEffect缺少依赖项：'classes.button'和'classes.warning'

这里的问题是，根据，我应该将SweetAlert组件设置为状态（我不知道这是否是一个好的实践，但他们建议如何使用它）

从“@material ui/core/styles”导入{makeStyles}”；
从“资产/jss/视图/警报”导入样式；
const useStyles=生成样式（样式）；
导出默认函数警报（）{
const[alert，setAlert]=useState（null）；
useffect（（）=>{
fetch（'api'）。然后（res=>res.json（））。然后（data=>setData（data））
.catch（错误=>{
设置警报(
{setAlert（null）；setLoading（false）}
onCancel={（）=>{setAlert（null）；setLoading（false）}
confirBMTNCSCLASS={classes.button+“”+classes.warning}//此处！
>
错误
)
})
}, [])
const classes=useStyles（）；
返回(
{alert}
...
)
}

我有多个警报组件，这就是为什么他们推荐这种用法。

---

我想知道解决这个问题的正确方法。

如果在保存按钮样式的

useffect（）

之外有一个

classes

对象，那么应该将

classes

对象作为依赖项传入：

useffect（（）=>{
...
}，[类别]；

否则，您可以硬编码按钮类：

confirmBtnCssClass={'btn btn-warning'}

---

@EdLucas的第一个答案是根据给定问题的正确解决方案

当您使用useEffect时，每个状态、道具和其中的某些函数都必须是依赖项，即使它从未更改，或者它是一个函数（依赖于其他函数、道具或状态），或者它更改得太频繁。这里的问题是，我们希望在依赖项数组中添加我们想要执行回调的内容，而不是它所支持的内容

这是一个更容易阅读的代码，而不是防止bug。Dan Abramov（gaearon）的回答是：“到目前为止，根据我们的经验，缺少依赖项导致的问题比丢失quick”[]意味着挂载“可视快捷方式”要严重得多。这就是为什么不是所有关于应该执行回调的内容，而是关于可能导致bug的内容

这就是我所做的：

const errorAlert = useCallback(
(message = 'Try again later') => {
  setAlert(
    <SweetAlert
      style={{ display: "block", marginTop: "-100px" }}
      title="Error"
      onConfirm={() => {setAlert(null); setLoading(false)}}
      onCancel={() => {setAlert(null); setLoading(false)}}
      confirmBtnCssClass={classes.button + " " + classes.warning}
    >
      {message}
    </SweetAlert>
  );
},
[classes.button,classes.warning]);

errorAlert函数包装到useCallback中，并遵循react文档的建议：

errorAlert无法移动到useEffect，因为其他函数正在使用它

errorAlert无法移动到组件外部，因为它使用“类”

最后，我将errorAlert函数包装到useCallback中，以确保它不会在每次渲染时更改 除非“classes.button”和“classes.warning”发生更改（这种情况永远不会发生），否则请使用具有 应再次执行errorAlert依赖项（所有依赖项）

---

1.我不知道“类”实际上是什么，但看起来像一个很大的依赖关系，也许它永远不会改变。2.我想我不能硬编码按钮类，因为“material ui”自动生成的类的格式类似于

.makeStyles ClassName randomNumber

。3.最简单的方法可能是添加

//eslint disable line

以隐藏警告，但这可能不是最好的方法。在列表中有一个永不更改的依赖项是可以的。如果您不想将

类添加到该列表中，您可以移动
const classes=useStyles（）编码到
useffect（）
中。
useEffect(() => {
 fetch('api')
  .then(res => res.json())
  .then(data => setData(data))
  .catch(err => errorAlert())
}, [errorAlert]);