Пользовательский хук реакции вызывает бесконечный цикл - PullRequest
Новая
       61

Пользовательский хук реакции вызывает бесконечный цикл

1 голос
/ 06 мая 2020

У меня есть настраиваемый хук выборки: 

export const useFetch = (url: string) => {
  const [response, setResponse] = useState<any>(null);
  const [error, setError] = useState<any>(null);

  const fetchList = (url: string) => {
    return API.get(AMPLIFY_ENPOINTS.default, url, { response: true });
  };

  useEffect(() => {
    const fetchFunc = async () => {
      try {
        const fetchResponse = await fetchList(url);
        setResponse(fetchResponse.data);
      } catch (error) {
        setError(error);
      }
    };
    fetchFunc();
  }, [url]);

  return { response, error };
};

Затем я использую его в компоненте: 

const fetchOrders = useFetch(apiUrl);
useEffect(() => {
  const { response, error } = fetchOrders;
  if (error) setError(error);
  if (response) {...}
}, [fetchOrders]);

И это вызывает бесконечное l oop, как мне go как починить?

Ответы [ 2 ]

2 голосов
/ 06 мая 2020

Ссылка fetchOrder сохраняет изменения при каждом повторном рендеринге, поскольку вы каждый раз возвращаете вновь созданный объект и, следовательно, запускает бесконечный l oop, когда вы вызываете setError в своем useEffect.

Вместо этого добавления fetchOrders как зависимости, добавьте response и error отдельно 

const { response, error } = useFetch(apiUrl);
useEffect(() => {
  const  = fetchOrders;
  if (error) setError(error);
  if (response) {...}
}, [response, error]);
0 голосов
/ 06 мая 2020

Именно эта строка отвечает за это 

return { response, error };

И, конечно, его соучастник в преступлении - это [fetchOrders] массив зависимостей во втором useEffect.

Первая строка возвращает новый объект и, следовательно, fetchOrders - всегда новое значение.

Поразмыслив над вашим кодом, я пришел к выводу, что вам, вероятно, вообще не нужен второй useEffect (я думаю). 

// the useFetch only re-fetches when url changes
const { response, error } = useFetch(url);

// use response directly, you don't need to re-set the error nor the response in your component.

Но если вы должны были создать побочный эффект с ответом, вы можете рассмотреть возможность обновления вашего хука useFetch, чтобы он принимал параметр обратного вызова и useEffect с зависимостью ответа.

...