该函数使useEffect Hook依赖

Question

我有一个函数，可以在单击时设置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);
  }

我尝试用just 代替handleClickOpenin ，但是由于重新渲染过多，我的页面崩溃了。useEffectsetOpen(true)

如何处理这种情况？

Answer 1

每次渲染都会创建新handleClickOpen功能。你可以记住useCallback

import { useCallback } from 'react'

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