React хук для запросов отдает неправильные данные?

Question

[Александр]

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

Код хука

export const useFetch = () => {
    const [loading, setLoading] = useState(false);
    const [response, setResponse] = useState();
    const [error, setError] = useState();

    const request = async (url, method = 'GET', body = null) => {
        setLoading(true);
        try {
            setResponse(null);
            setError(null);

            const response = await fetch(url, {method, body, headers: {
                'Content-Type': 'application/json'
                // 'Content-Type': 'application/x-www-form-urlencoded',
            }});
 
            setLoading(false);

            if (response.ok) {
                const json = await response.json();
                setResponse(json);
            }

            if(!response.ok) {
                throw new Error(response.statusText);
            }
        } catch (e) {
            setError(e.message);
        }
    };

    const clearError = () => setError(null);
    return { loading, error, request, response, clearError };
};

Возникла странная проблема: данные, которые возвращает хук, запаздывают.

Использую хук в одном компоненте:

Код компонента

const getThread = async () => {
        try {
            await request(`/api/boards/${boardName}/${threadName}`);

            if (error) {
           // Выполняется при ошибке
            }
        } catch (e) {
            console.error(e.message);
        }
    }

При успешном запросе возвращается undefined и в Error, и в Response. При следующем запросе хук возвращает правильные данные из предыдущего запроса. Если при первом запросе была ошибка, то хук вернет ее только в следующем, даже если там был успешный запрос.

Comments

[Роман Дворянов]

Непонятно почему ваш линтер не сработал, здесь вы объявляете константу response
const response = await fetch(url, {...})
Ранее это константа уже была объявлена из хука стейта
const [response, setResponse] = useState();
Не забудьте передать дефолтное значение в стейт

Answer 1

[Воващ]

Стоит обернуть в хук useCallback.

будет примерно так

const request =  useCallback(async (url, method = 'GET', body = null, headers ={}) => {
        setLoading(true)
        try{
            if (body) {
                body = JSON.stringify(body)
                headers['Content-Type'] = 'application/json'
            }

            const response = await fetch(url, {method, body, headers})
            const data = await response.json()

            if (! response.ok){
                throw new Error(data.message || 'Что-то пошло не так')
            }

            setLoading(false)

            return data
        }catch(e){
            setLoading(false)
            setError(e.message)
            throw e
        }
    }, [])