Ненужный параметр в массиве зависимостей useEffect - PullRequest
Новая
       7

Ненужный параметр в массиве зависимостей useEffect

0 голосов
/ 06 марта 2020

Я создаю приложение, в котором пользователи могут создавать и делиться заметками. Чтобы поделиться заметками друг друга, пользователи должны отправлять запросы конкретным c пользователям. Запросы выбираются каждый раз, когда загружается дом. Тем не менее, запросы - это контекст, так как он также используется на панели инструментов и странице запросов, чтобы показать наличие запросов. Когда я использую метод контекста setRequsts для установки всех запросов после домашней загрузки, выборка переходит в бесконечные l oop из /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])

1 Ответ

1 голос
/ 06 марта 2020

Проблема в том, что контекст предоставляет технически различную функцию setRequests для каждого рендера (который имеет другой адрес). Это заставляет useEffect срабатывать при каждом рендере.

Чтобы обойти это, вы можете обернуть setRequests в useCallback() хук, например так: 

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

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