React Hook useEffect / useCallback имеет недостающую зависимость

У меня есть это предупреждение в моем файле ProductUpdate.js.

Мой код выглядит так:

 const fetchProduct = () => {
      getProduct(slug)
      .then(p => setValues({...values, ...p.data }))
    }
 
    useEffect(() => {
      fetchProduct()
      fetchCategories()
    }, [])

В предупреждении говорится:

У React Hook useEffect отсутствует зависимость: 'fetchProduct'. Либо включите его, либо удалите массив зависимостей

Но когда я добавляю fetchProduct в массив зависимостей, я вхожу в бесконечный цикл.

Я пробовал использовать крючок useCallback:

 const fetchProduct = useCallback(() => {
      getProduct(slug)
      .then(p => setValues({...values, ...p.data }))
    }, []) 
 
    useEffect(() => {
      fetchProduct()
      fetchCategories()
    }, [fetchProduct])

Но затем в предупреждении говорится, что нужно добавить зависимости slug и values ​​в useCallback. Когда я это сделаю, я снова вхожу в бесконечный цикл.

Любое решение?


reactjs javascript react-hooks use-effect usecallback
person Rokus    schedule 20.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Добавление getProduct, slug и setValues в массив зависимостей обратного вызова должно работать:

const fetchProduct = useCallback(() => {
    getProduct(slug)
        .then(p => setValues(values => ({ ...values, ...p.data })))
}, [getProduct, slug, setValues])

useEffect(() => {
    fetchProduct()
    fetchCategories()
}, [fetchProduct, fetchCategories])

Следуйте тому же шаблону для вставки fetchCategories в useCallback.

person CertainPerformance    schedule 20.03.2021
comment
Я все еще получаю это предупреждение: у React Hook useCallback отсутствует зависимость: 'values'. Либо включите его, либо удалите массив зависимостей. Вы также можете выполнить функциональное обновление setValues ​​(v = ›...), если вам нужны только значения в вызове setValues. - person Rokus; 20.03.2021
comment
Вы уверены, что используете код в моем ответе? values - это параметр setValues, а не внешняя переменная. .then(p => setValues(values => ({ ...values, ...p.data }))) Попробуйте точно скопировать мой код. - person CertainPerformance; 20.03.2021
comment
Хорошо, теперь все работает нормально, без предупреждений, без бесконечных циклов, большое спасибо - person Rokus; 20.03.2021
comment
Когда ответ решит вашу проблему, вы можете проголосовать за него и / или пометить его как Принято (установите флажок слева), чтобы указать, что проблема решена :) - person CertainPerformance; 20.03.2021