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

【问题标题】：Unnecessary parameter in useEffect dependency arrayuseEffect 依赖数组中不必要的参数
【发布时间】：2020-03-06 14:05:16
【问题描述】：

我正在创建一个应用程序，用户可以在其中创建和共享笔记。要共享彼此的笔记，用户必须向特定用户发送请求。每当加载主页时都会获取请求。但是，请求是一个上下文，因为它也在工具栏和请求页面中使用以显示请求的存在当我使用上下文的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])

【问题讨论】：

请告诉我们setRequests 的创建位置，然后传递给RequestsContext.Provider
在请求上下文文件const RequestsContextProvider = props => { const [requests, setRequests] = useState([]) const [isRequests,setIsRequests]=useState(false) const requestHandler = arr => { setRequests(arr) if (requests.length > 0) { setIsRequests(true) } } return ( <RequestsContext.Provider value={{ isRequests:isRequests, requests: requests,setRequests: arr => requestHandler(arr) }} > {props.children} </RequestsContext.Provider> ) }
并在放置所有路由之前在App文件中消费<RequestsContextProvider> <Layout> {routes} </Layout> </RequestsContextProvider>

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

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

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

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

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

【讨论】：