在使用Axios获取数据时,可以通过ReactJs中的history.push将数据数组从一个组件传递到另一个组件。下面是一个示例代码:
首先,在发送Axios请求的组件中,获取到数据数组后,可以使用history.push将数据传递给目标组件。假设目标组件的路由路径为"/target",可以按照以下方式进行传递:
import React from 'react';
import { useHistory } from 'react-router-dom';
import axios from 'axios';
const SourceComponent = () => {
const history = useHistory();
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
const data = response.data;
// 将数据传递给目标组件
history.push({
pathname: '/target',
state: { data: data }
});
} catch (error) {
console.error(error);
}
};
return (
<div>
<button onClick={fetchData}>获取数据</button>
</div>
);
};
export default SourceComponent;
然后,在目标组件中,可以通过props.location.state获取传递过来的数据数组。可以按照以下方式进行接收和使用:
import React from 'react';
const TargetComponent = (props) => {
const data = props.location.state.data;
return (
<div>
{/* 使用传递过来的数据数组 */}
{data.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};
export default TargetComponent;
这样,当在SourceComponent组件中点击"获取数据"按钮后,会发送Axios请求获取数据,并将数据数组通过history.push传递给TargetComponent组件。TargetComponent组件接收到数据后,可以进行展示或其他操作。
注意:为了能够使用history.push,需要确保组件被包裹在Router组件中,例如在App.js中使用BrowserRouter包裹整个应用。
领取专属 10元无门槛券
手把手带您无忧上云