Как исправить это предупреждение «React Hook useEffect имеет отсутствующую зависимость»? - PullRequest
Новая
       26

Как исправить это предупреждение «React Hook useEffect имеет отсутствующую зависимость»?

0 голосов
/ 01 октября 2019

Вот мой файл: 

// useFetcher.js
import { useEffect, useState } from "react";

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  async function loadData() {
    try {
      setLoading(true);
      const actionData = await action();
      setData(actionData);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    loadData();
  }, [action]);
  return [data, loading, error];
}

В строке 21 жалобы Эслина на то, что: 

React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps)

Как это исправить?

Ответы [ 2 ]

1 голос
/ 01 октября 2019

Лучший способ здесь - определить асинхронную функцию внутри useEffect: 

export default function useFetcher(action) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);
        const actionData = await action();
        setData(actionData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [action]);
  return [data, loading, error];
}

Дополнительная информация в документах .

0 голосов
/ 01 октября 2019

Добавьте функцию loadData к массиву в вашем useEffect. Это избавит от жалобы: 

useEffect(() => {
  loadData();
}, [action, loadData]);
...