useEffect и linting «реакции-крючки / исчерпывающие действия» - PullRequest
Новая
       4

useEffect и linting «реакции-крючки / исчерпывающие действия»

2 голосов
/ 24 февраля 2020

Я включил пустой массив, потому что он должен запускаться только один раз, однако я получаю предупреждение, потому что я не включаю ajaxCallsInProgress в качестве зависимости. Причина, по которой я этого не делаю, заключается в том, что это создает бесконечное число l oop, если я это сделаю. Есть ли лучший способ справиться с этим сценарием, который устранит предупреждение о задержке? Насколько я могу судить, это довольно простой и правильный сценарий. 

useEffect(() => {
     const fetch = async () => {
         // update state to show pending
         setAjaxCallsInProgress(ajaxCallsInProgress + 1)

         try {
             const humans = await getHumans()

             setHumans(humans)
         } catch (error) {
             setError(error)
         } finally {
             setAjaxCallsInProgress(ajaxCallsInProgress - 1)
         }
     }

     fetch()
}, [])

1 Ответ

2 голосов
/ 24 февраля 2020

В / уменьшение состояния не требует, чтобы вы знали текущее состояние, потому что setState имеет версию обратного вызова , которая получает текущее состояние в качестве аргумента и возвращает следующее состояние: 

const [ajaxCallsInProgress, setAjaxCallsInProgress] = useState(0);

useEffect(() => {
    const fetch = async () => {
        // update state to show pending
        setAjaxCallsInProgress(current => current + 1)

        try {
            const humans = await getHumans()

            setHumans(humans)
        } catch (error) {
            setError(error)
        } finally {
            setAjaxCallsInProgress(current => current - 1)
       }
   }

    fetch()
}, [])

Это удалит зависимость от ajaxCallsInProgress и также является рекомендацией для обновления состояния на основе текущего состояния:

Как сделать Я обновляю состояние значениями, которые зависят от текущего состояния?

Передать функцию вместо объекта в setState, чтобы при вызове всегда использовалась самая последняя версия состояния (см. Ниже).

Обычно вы должны использовать его при доступе к текущему состоянию для обновления состояния.

...