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 知道如何处理未定义的参数。