useEffect 依赖数组中不必要的参数

Question

我正在创建一个应用程序，用户可以在其中创建和共享笔记。要共享彼此的笔记，用户必须向特定用户发送请求。每当加载主页时都会获取请求。但是，请求是一个上下文，因为它也在工具栏和请求页面中使用以显示请求的存在当我使用上下文的 setRequsts 方法在主页加载后设置所有请求时，提取会进入 /note 和 /me URL 的无限循环，因为 setRequests方法也提供在useEffect的依赖数组中删除后，useEffect 显示缺少的依赖项。解决方法是什么？

  const {setRequests } = useContext(RequestsContext)
  const [notes, setNotes]    = useState([])
  const [fetched, setFetched] = useState('')
  const { isAuthenticated } = props
  const {page}=useContext(PageContext)
  const [sortBy,setSortBy]=useState('latest')

  useEffect(() => {
    const fetch = async () => {
      try {
        let url = 'http://192.168.56.1:5000/api/v1/note', p, sort
        if (page) p = `?page=${page}&limit=12`
        if (sortBy === 'latest') {
          sort=''
        } else if (sortBy === 'most_liked') {
          sort='&sort=likes'
        }
        const res = await Axios.get(url+p+sort)
        setNotes(res.data.data)
        if (res.data.data.length > 0) {
          setFetched('Y')
        } else {
          setFetched('N')
        }
      } catch (err) {
        console.log(err)
      } finally {
        if (isAuthenticated) {
          const fetch = async () => {
            const res = await axios.get(`user/me`)
            if (res.data.data.createdPosts.length > 0) {
              const arr = res.data.data.createdPosts.map(el => el.request)
              console.log(arr)
              setRequests(arr)
            }
          }
          fetch()
        }
      }
    }
    fetch()
  }, [isAuthenticated, /* setRequests, */ page, sortBy])

Answer 1

问题是上下文在每个渲染器（具有不同地址）上提供技术上不同的 setRequests 函数。这会导致 useEffect 在每次渲染时触发。

要解决此问题，您可以将 setRequests 包装在 useCallback() 挂钩中，如下所示：

// ...
const wrappedSetRequests = useCallback(setRequests, []);
// ...

useEffect(() => {
  // do your stuff using 'wrappedSetRequests' instead of setRequests.
}, [ wrappedSetRequests /*...*/ ]);

useEffect 依赖数组中不必要的参数

Unnecessary parameter in useEffect dependency array

javascript

reactjs

react-hooks

use-effect