这个问题可能是由异步请求的性质引起的。当您的组件在加载时立即调用Axios时,组件的状态可能还没有被设置,因此Axios请求会失败或收到一个空状态。为了解决这个问题,您可以在组件装载后再调用Axios请求,并且使用状态更新(setState)函数来更新响应数据。这里是一个示例代码:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(res => {
setData(res.data);
})
.catch(err => console.log(err));
}, []);
return (
{data.map(item => (
{item.title}
{item.completed ? 'Completed' : 'Not completed'}
))}
);
}
export default App;
在这个示例中,我们使用了React的useEffect钩子,它会在组件装载后调用Axios请求。useEffect的[]参数是一个空数组,表示我们只想在组件装载时调用Axios一次。Axios响应数据将通过setData函数更新状态,以便在组件渲染时可以何时使用。
下一篇:Axios请求忽略参数