@sasha7b
React, Node.js, UX/UI дизайн.

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

Написал хук для получения данных с сервера через 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. При следующем запросе хук возвращает правильные данные из предыдущего запроса. Если при первом запросе была ошибка, то хук вернет ее только в следующем, даже если там был успешный запрос.
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
@V0vash
НАшКОДИЛ
Стоит обернуть в хук 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
        }
    }, [])
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы