Custom useFetch Hook не работает после изменения состояния URL - PullRequest
Новая
       24

Custom useFetch Hook не работает после изменения состояния URL

0 голосов
/ 13 марта 2020

У меня есть одностраничное приложение, которое будет отображать две разные "колоды" компонентов "Карты"

  1. Одна колода с именем ArtistDeck вызывает ловушку useFetch для возврата артистов
  2. Исполнители отображаются, и при нажатии на имя исполнителя
  3. «AlbumDeck» вызывает хук useFetch для возврата альбомов

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

Вот первый компонент, который эффективно вызывает useFetch и возвращает данные: 

const ArtistDeck = (props) => {
    // props.apiRequest is a correctly formatted api request

    const [apiRequest, setApiRequest] = React.useState("");
    React.useEffect(() => {
        setApiRequest(props.apiRequest);
    }, [props.apiRequest]);

    const apiResult = useFetch(apiRequest);
    // do more stuff
}

А вот второй, который использует функцию Fetch: 

const AlbumDeck = (props) => {
    // props.apiRequest is a correctly formatted api request
    const [apiRequest, setApiRequest]     = React.useState(props.apiRequest);
    React.useEffect(() => {
        setApiRequest(props.apiRequest);
    }, [props.apiRequest]);

    const apiResult = useFetch(apiRequest);    
    // do more stuff
}

Наконец, вот useFetch: 

export const useFetch = (url) => {
    const [response, setResponse] = React.useState(null);
    const [error, setError] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);
    React.useEffect( () => {
        console.log("Reached Use Effect");
        const fetchData = async () => {
            console.log("Reached fetchData");
            setIsLoading(true);
            try {
                console.log("Reached try block");
                const res = await fetch(url);
                console.log("Received res: " + res.statusText);
                const json = await res.json();
                console.log("Received json: " + json);
                setResponse(json);
                setIsLoading(false)
            }
            catch (error) {
                setError(error);
            }
        };
        fetchData();
    }, [url]);
    return { response, error, isLoading };
};

При отладке нет из оператора console.log срабатывает, и он просто возвращает состояния по умолчанию. useEffect пропущено. Как я могу заставить useEffect работать во втором вызове?

...