Реагируйте на ошибку lint useEffect и useCallback - отсутствует зависимость - PullRequest
Новая
       56

Реагируйте на ошибку lint useEffect и useCallback - отсутствует зависимость

0 голосов
/ 28 февраля 2020

Линтер жалуется на функцию, которая отсутствует как зависимость, хотя я использую рекомендованный хук useCallback в родительском компоненте, где она определена.

Кто-нибудь знает, как это исправить? Кажется, нигде не могу найти пример

ссылка на песочницу здесь https://codesandbox.io/s/hopeful-wind-w4sp5

const arr = ['One', 'Two', 'Three']

const SyncingData = () => {
  const [progress, setProgress] = useState(0)

  const [children, setChildrenProgress] = useState(arr.map(item => 0))

  const handleChildrenProgress = useCallback(
    (progress, index) => {
      setChildrenProgress(
        children.map((item, currIndex) =>
          index === currIndex ? progress : item,
        ),
      )
    },
    [children],
  )

  useEffect(() => {
    setProgress(
      children.reduce((sum, item) => (sum = sum + item), 0) / children.length,
    )
  }, [children])

  return (
    <div>
      <div>Total Progress: {progress}</div>
      <ul>
        {arr.map((item, index) => (
          <Child
            key={index}
            index={index}
            updateProgress={handleChildrenProgress}
            name={item}
            delay={10 * index}
          />
        ))}
      </ul>
    </div>
  )
}

const Child = ({updateProgress, name, index, delay}) => {
  const [progress, setProgress] = useState(0)


  // This is the useEffect the linter doesn't like
  useEffect(() => {
    updateProgress(progress, index)
  }, [progress, index])

  useInterval(() => {
    if (progress < 100) {
      setProgress(progress + 1)
    }
  }, delay)

  return (
    <div>
      {name} {progress}
    </div>
  )
}

1 Ответ

0 голосов
/ 28 февраля 2020

Я думаю, вы должны попытаться добавить "updateProgress" в список зависимостей эффекта: 

useEffect(() => {
    updateProgress(progress, index)
  }, [progress, index, updateProgress])

функция updateProgress заключена в лямбду, которую вы предоставляете для эффекта.

Линтер пытается сказать вам, что если эта функция изменится, эффект не примет это изменение во внимание.

...