Состояние не обновляется при использовании пользовательского хука React, который использует Axios с useReducer для получения асинхронных данных

Мое приложение возвращает «null is not a object» Ошибка рендеринга при использовании пользовательского хука использованиеFetch, который я сделал для получения асинхронных данных с помощью аксиомы. Свойства статус, ошибка и данные остаются такими же со значениями по умолчанию, я не знаю, связана ли проблема с тем, как я изменяю свои данные, или я не возвращаю или не использую их должным образом.

Render Error

API

// Axios config

import axios from "axios";

const instance = axios.create({
    baseURL: "http://10.0.2.2:8000/api",
});

export default instance;
// Custom hook

import { useReducer, useEffect } from "react";
import axiosConfig from "../axiosConfig";

export default function useFetch(url) {
    const initialState = {
        status: "idle",
        error: null,
        data: null,
    };

    const [state, dispatch] = useReducer((state, action) => {
        switch (action.type) {
            case "FETCHING":
                return { ...state, status: "fetching" };
            case "FETCHED":
                return { ...state, status: "fetched", data: action.payload };
            case "FETCH_ERROR":
                return { ...state, status: "error", error: action.payload };
            default:
                return state;
        }
    }, initialState);

    useEffect(() => {
        let cancelRequest = false;
        if (!url) return;

        function fetchData() {
            dispatch({ type: "FETCHING" });

            axiosConfig
                .get(url)
                .then((response) => {
                    if (cancelRequest) return;
                    dispatch({ type: "FETCHED", payload: response.data });
                })
                .catch((error) => {
                    if (cancelRequest) return;
                    dispatch({ type: "FETCH_ERROR", payload: error });
                });
        }

        fetchData();

        return function cleanup() {
            cancelRequest = true;
        };
    }, [url]);

    return [state];
}
// Consume custom hook

import React from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    ActivityIndicator,
} from "react-native";
import GlobalStyles from "../constants/GlobalStyles";
import { Entypo, EvilIcons } from "@expo/vector-icons";
import format from "date-fns/format";
import useFetch from "../utils/hooks/useFetch";

export default function TweetScreen({ route, navigation }) {
    const [{ status, error, data: tweet }] = useFetch(
        `/tweets/${route.params.tweetId}`
    );

    error && console.log(error);

    function gotoProfile(userId) {
        navigation.navigate("Profile Screen", { userId });
    }

    return (
        <View style={GlobalStyles.container}>
            {status === "fetching" ? (
                <ActivityIndicator size="large" color="#007aff" />
            ) : (
                <>
                    <View
                        style={[
                            GlobalStyles.flexRow,
                            GlobalStyles.spaceBetween,
                            styles.tweetContainer,
                        ]}
                    >
                        <TouchableOpacity
                            style={GlobalStyles.flexRow}
                            onPress={() => gotoProfile(tweet.user.id)}
                        >
                            <Image
                                style={styles.avatar}
                                source={{ uri: tweet.user.avatar }}
                            />
                        </TouchableOpacity>
                    </View>
                </>
            )}
        </View>
    );
}
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
92
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваш ответ данных равен нулю. Вы можете избежать неопределенности, сказав { uri : tweet?.data.avatar } , но я предполагаю, что вам следует сначала правильно деструктурировать свой useFetch, выполнив const { data, error , loading } = useFetch(url) . Если и это не поможет, то стоит require(`${tweet?.data.avatar}`) . Надеюсь, это поможет. Однако ваш код действительно хрупок, вы должны сначала отладить, почему вы возвращаете null...

Ответ принят как подходящий

Только что решил эту проблему, оказалось, что мне просто нужно было сделать return state вместо return [state], поскольку обертывание его внутри массива приводит к тому, что состояние устаревает.

Итак, теперь я просто использую пользовательский хук следующим образом: const { status, error, data: tweet } = useFetch(...);

Вместо: const [{ status, error, data: tweet }] = useFetch(...);

Другие вопросы по теме