reactjs - useEffect 未在 ContextProvider 中触发

Question

我在名为DataProvider的 Context Provider 中使用 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知道如何处理未定义的参数。