React Hook useEffect 缺少依赖项：'classes'（Material-ui 样式和 react-bootstrap-sweetalert）

Question

我收到此警告：“React Hook useEffect 缺少依赖项：'classes.button' 和 'classes.warning'”。

这里的问题是，根据 recommended usage of react-bootstrap-sweetalert，我应该将 SweetAlert 组件设置为状态（我不知道这是否是一个好的做法，但他们建议如何使用它）。

import { makeStyles } from "@material-ui/core/styles";
import styles from "assets/jss/views/Alerts";
const useStyles = makeStyles(styles);

export default function Alerts() {
  const [alert, setAlert] = useState(null);

  useEffect(() => {
    fetch('api').then(res => res.json()).then(data => setData(data))
      .catch(err => {

        setAlert(
          <SweetAlert
            style={{ display: "block", marginTop: "-100px" }}
            title="Error"
            onConfirm={() => {setAlert(null); setLoading(false)}}
            onCancel={() => {setAlert(null); setLoading(false)}}
            confirmBtnCssClass={classes.button + " " + classes.warning} // HERE!
          >
            error
          </SweetAlert>
        )

      })
  }, [])

  const classes = useStyles();
  return (
    <div>
     {alert}
     ...
    </div>
  )
}

我有多个警报组件，这就是他们推荐使用的原因。我想知道解决这个问题的正确方法。

Answer 1

如果您在 useEffect() 之外有一个 classes 对象来保存您的按钮样式，那么您应该将 classes 对象作为依赖项传入：

useEffect(() => {
  ...
}, [classes]);

否则，您可以对按钮进行硬编码类:

confirmBtnCssClass={'btn btn-warning'}

Answer 2

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

当你使用 useEffect 它里面的每个状态，道具和一些函数都必须是一个依赖项，即使它永远不会改变或者它是一个函数（依赖于其他函数, props 或 state) 或者它是否经常变化。这里的问题是我们想将我们想要执行回调的内容添加到 dependencies 数组中，而不是它应该是 according to this issue.

这是关于更易于阅读的代码与防止错误。 Dan Abramov (gaearon) 的回答是：“到目前为止，根据我们的经验，由缺少依赖项引起的问题比失去快速的“[] 表示挂载”视觉快捷方式要严重得多。”这就是为什么不是关于应该执行回调的全部内容，而是关于可能导致错误的内容的原因。

这是我所做的：

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]);

那我就可以这样用了:

useEffect(() => {
 fetch('api')
  .then(res => res.json())
  .then(data => setData(data))
  .catch(err => errorAlert())
}, [errorAlert]);

errorAlert 函数按照 React 文档的建议包装到 useCallback 中： https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

errorAlert 不能移动到 useEffect 中，因为它被其他函数使用
errorAlert 不能移出组件，因为它使用 'classes'
作为最后的手段，我将 errorAlert 函数包装到 useCallback 中，以确保它不会在每次渲染时发生变化除非 'classes.button' 和 'classes.warning' 改变（它永远不会发生）然后使用具有应该再次执行 errorAlert 依赖项（所有这些）。

React Hook useEffect 缺少依赖项：'classes'（Material-ui 样式和 react-bootstrap-sweetalert）

React Hook useEffect has missing dependencies: 'classes' (Material-ui styles and react-bootstrap-sweetalert)

reactjs

material-ui

react-hooks

sweetalert

use-effect