useEffect 未在 ContextProvider 中触发答案

【问题标题】：useEffect not triggering in ContextProvideruseEffect 未在 ContextProvider 中触发
【发布时间】：2021-07-21 21:54:15
【问题描述】：

我在名为 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");
    }
};

下面是错误图片

请帮我解决这个错误？？？？。

【问题讨论】：

标签： reactjs axios react-hooks context-api

【解决方案1】：

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

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

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

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

【讨论】：