Reactjs 该函数使useffect的依赖项成为钩子

我有一个功能，可以在单击时设置我的useState，一切正常，但每次都会收到警告：

 Line 22:  The 'handleClickOpen' function makes the dependencies of useEffect Hook (at line 20) change on every render. To fix this, wrap the 'handleClickOpen' definition into its own useCallback() Hook  react-hooks/exhaustive-deps

这是我的代码：

  useEffect(() => {
    axios.get("/api/getBlacklist/").then(data => setBlacklistItems(data.data));

    // eslint-disable-next-line
  }, [handleClickOpen]);

  function handleClickOpen() {
    setOpen(true);
  }

我曾尝试将

useffect

中的

handleClickOpen

替换为

setOpen（true）

，但由于重新呈现过多，我的页面崩溃

---

如何处理这种情况？

每次渲染它都会创建新的

handleClickOpen

函数。您可以通过

useCallback

import { useCallback } from 'react'

const handleClickOpen = useCallback(() => {
  setOpen(true)
}, [])

---

为什么每个渲染都会创建一个新的

handleClickOpen

函数？这就是javascript和react的工作方式，每个渲染函数都是唯一的。您可以在此处阅读一些相关内容（步骤2）：