useEffect 未在 ContextProvider 中触发

Question

我在名为 DataProvider 的上下文提供程序中使用 useEffect 挂钩。在 useEffect 挂钩中，我使用 axios 向端点发送请求。但问题是，useEffect 钩子没有触发。这种情况我该怎么办。谁能帮我解决这个问题。

上下文提供程序代码：

export const DataProvider = ({ children }) => {
    const [data, setData] = useState({});

    useEffect(() => {
        const options = {
            method: "GET",
            url: "https://corona-virus-world-and-india-data.p.rapidapi.com/api_india",
            headers: {
                "x-rapidapi-key": API_KEY,
                "x-rapidapi-host": API_HOST
            }
        };

        axios
            .request(options)
            .then(function(response) {
        console.log(response.data);
        setData(response.data);
            })
            .catch(function(error) {
                console.error(error);
            });
    }, []);

    if(data) {
        return (
            <DataContext.Provider value={[data, setData]}>
                {children}
            </DataContext.Provider>
        );
    } else {
        console.log("error");
    }
};

下面是错误图片

请帮我解决这个错误。

Answer 1

React 首先渲染，并且只有在第一次渲染之后它才会执行 useEffect。您正在尝试访问尚未初始化的属性。

只需处理您的数据并使用 if 有条件地呈现，或者在您的卡片容器中执行此操作：

<Cardcontainer caseNumber={numberWithCommas(data?.total_values?.deaths)}/>

确保numberWithCommas知道如何处理未定义的参数。

useEffect 未在 ContextProvider 中触发

useEffect not triggering in ContextProvider

reactjs

axios

react-context

react-hooks