Вызов функции в потомке, переданный от родителя в хуке useEffect (), React

Question

Я определил функцию в родительском компоненте, которая обновляет локальное состояние и передает ее дочернему компоненту. В дочернем компоненте я хочу вызывать функцию в ловушке useEffect каждый раз, когда изменяется значение зависимости magLockDropdown. Когда я пытаюсь это сделать, я получаю предупреждение о повреждении, показанное ниже. Будет ли хорошей идеей отключить линтер для этого примера? Я понимаю, что каждый раз, когда родитель перерисовывает, он создает функцию, которая передается вниз, но не уверен, вызывает ли это предупреждение. Любая помощь приветствуется. Спасибо!

Функция в родительском компоненте.

const updateWeeklyTestState = (name, value) => {
setWeeklyTest({
  ...weeklyTest, [name]: value
})}

Хук UseState в дочернем компоненте.

  useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
  }, [maglockDropdown])

esLint Предупреждение:

У React Hook useEffect отсутствует зависимость: 'updateWeeklyTestState'. Либо включите его, либо удалите массив зависимых реагирующих зацепок / исчерпывающие задержки

РЕДАКТИРОВАТЬ

дочерняя декларация

export default function Maglocks (props) {
const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])
const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props

Answer 1

Это просто linting предупреждение, как вы сказали.

Здесь

useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
  }, [maglockDropdown])

хук зависит от updateWeeklyTestState. Так что его нужно передать хукам как список зависимостей .

Because of missing dependancy linting giving this warning.

Answer 2

попробуйте это

   useEffect(() => {
        if(updateWeeklyTestState){
           updateWeeklyTestState (failList, maglockDropdown)
        }
   }, [maglockDropdown])

или это

  export default function Maglocks (props) {
  const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props
  const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])

Answer 3

сейчас (без всяких асин c в вашем useEffect) можно игнорировать предупреждение. В противном случае, если setWeeklyTest не приходит от useState или useCallback, вы можете столкнуться с «проблемой устаревших данных» (поэтому она будет вызываться с неверными / устаревшими входными данными).

На С другой стороны, если вы просто поместите updateWeeklyTestState в зависимость useEffect, вы будете запускать тело каждый раз, когда родительский рендеринг (что может быть в соответствии с вашими потребностями).

Поэтому я предлагаю также объявить updateWeeklyTestState как useCallback, поэтому было бы то же самое:

const updateWeeklyTestState = useCallback((name, value) => {
setWeeklyTest({
  ...weeklyTest, [name]: value
})}, [setWeeklyTest]);

, а затем добавление в качестве зависимости к useEffect не нарушит вашу логику c:

useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
}, [maglockDropdown, updateWeeklyTestState])