React Hook useEffect вызывается условно. React Hooks должны вызываться в одном и том же порядке при рендеринге каждого компонента. - PullRequest
Новая
       187

React Hook useEffect вызывается условно. React Hooks должны вызываться в одном и том же порядке при рендеринге каждого компонента.

1 голос
/ 07 августа 2020 
export const FetchDailyData = () => {
  try {

    const [data, setData] = useState({ numbers: [], isFetching: false });

    useEffect(() => {
        const fetchData = async () => {
            setData({ ...data, isFetching: true });
            const response = await axios.get(`${apiURL}/daily`);
            setData({
                ...data,
                numbers: response.data.slice(0, 50),
                isFetching: false
            });
        };
        fetchData();
    }, [data]); 

    console.log(`data= ${data.numbers} isFetching= ${data.isFetching}`);

  } catch (error) {
    if (error) throw error;
    console.log(error);
    setData({ ...data, isFetching: false });
  }
}

Кто-нибудь может помочь мне решить эту проблему? Я попытался получить данные API, но не могу обработать эту ошибку.

Ответы [ 2 ]

2 голосов
/ 07 августа 2020

Вы не можете заключить useEffect во что-либо, что может привести к его неработоспособности, включая try / catch. Глядя на то, что вы делаете, вероятно, лучший вариант: 

export const FetchDailyData = () => {
    const [data, setData] = useState({ numbers: [] });
    const [fetching, setFetching] = useState(false);
    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(`${apiURL}/daily`);
            setData({
                ...data,
                numbers: response.data.slice(0, 50),
            });
        }
        try {
            setFetching(true);
            fetchData();
        } catch (error) {
            console.error(error);
        } finally {
            setFetching(false);
        }
    }, [data]); 
}
0 голосов
/ 07 августа 2020

Поскольку ваш вызов useEffect находится внутри try / catch, возможно, что эффект не будет запущен на данном рендере. Это зависит от того, бросает ли что-нибудь. Хуки должны выполняться в одном и том же порядке при каждом рендеринге - я думаю, это связано с тем, как React отслеживает их внутренне, - а команда try / catch позволяет пропустить этот вызов.

Если вас просто беспокоит бросок при извлечении, переместите фиксатор try / catch внутри крючка, а не наоборот.

...