当使用Axios进行网络请求时,如果调用成功的消息未显示,可能是因为返回的数据没有正确处理或者没有将数据渲染到页面上。以下是一种解决方法的示例代码:
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
axios
.get("https://api.example.com/data")
.then((response) => {
setData(response.data);
})
.catch((error) => {
setError(error.message);
});
}, []);
if (error) {
return Error: {error};
}
return (
{data ? (
Data: {data}
) : (
Loading...
)}
);
};
export default App;
在上面的代码中,我们使用了React的useState钩子来管理数据和错误状态。在组件的useEffect钩子中,我们发送了一个GET请求,并将返回的数据保存在data状态中。如果请求失败,我们将错误消息保存在error状态中。
然后,在组件的渲染部分,我们根据data和error的值来显示不同的内容。如果有错误,我们显示错误消息;如果有数据,我们显示数据;如果还没有数据,我们显示"Loading..."。
确保在您的代码中进行适当的错误处理和数据渲染,以确保正确显示Axios调用的成功消息。