[英]React - How can I pass API data from one component to another in a different js file?
Lets say I want to pass the data from the getData
axios request in my code below to another function located in a different file in my react app.假设我想将下面代码中的
getData
axios 请求中的数据传递给位于我的 react 应用程序中不同文件中的另一个 function。
export default function Bucket() {
const { slug } = useParams();
const classes = useStyles();
const [data, setData] = useState({ bucket: [] });
useEffect(() => {
axiosInstance.get('bucket/' + slug + '/').then((res) => {
setData({ bucket: res.data });
console.log(res.data);
});
}, [setData, slug]);
const getData = () => {
axiosInstance
.get('bucket/fin-data/' + slug).then((response) => {
console.log(response)
})
}
return (
<Container component="main" maxWidth="md">
<CssBaseline />
<div className={classes.paper}></div>
<div className={classes.heroContent}>
<Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="textPrimary"
gutterBottom
>
{data.bucket.name}
</Typography>
<Typography
variant="h5"
align="center"
color="textSecondary"
paragraph
>
{data.bucket.about}
</Typography>
<SymbolInput/>
</Container>
<button onClick={getData}>get data</button>
</div>
</Container>
);
}
Instead of calling my API twice, how would I go about passing that data to another component?而不是调用我的 API 两次,我将如何 go 将该数据传递给另一个组件? Most of the examples I'm looking at use classes, I would like to use functions instead.
我正在查看的大多数示例都使用类,我想改用函数。
For example, how can I pass that data to this chart, specifically where I marked.例如,我如何将该数据传递到此图表,特别是我标记的位置。 Pseudocode is welcomed, also please change around the example chart if needed:
欢迎使用伪代码,如果需要,也请更改示例图表:
const BarChart = () => {
return (
<div>
<Pie
data={{
labels:<HERE>,
datasets: [
{
label: '# of votes',
data: <HERE>,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
}}
height={400}
width={600}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
legend: {
labels: {
fontSize: 25,
},
},
}}
/>
</div>
In React, You can pass the data two way most commonly:在 React 中,您可以通过两种最常见的方式传递数据:
1. 1.
export default function Bucket({ onGetData }) {
const { slug } = useParams();
const classes = useStyles();
const [data, setData] = useState({ bucket: [] });
useEffect(() => {
axiosInstance.get('bucket/' + slug + '/').then((res) => {
setData({ bucket: res.data });
console.log(res.data);
});
}, [setData, slug]);
const getData = () => {
axiosInstance
.get('bucket/fin-data/' + slug).then((response) => {
onGetData(response);
console.log(response)
})
}
return (
<Container component="main" maxWidth="md">
<CssBaseline />
<div className={classes.paper}></div>
<div className={classes.heroContent}>
{...}
<button onClick={getData}>get data</button>
</div>
</Container>
);
}
export default function MainComponent() {
const [data, setData] = useState({});
const onGetData = (result) => {
setData(result);
};
return (
<MainComponent>
<Bucket onGetData={onGetData} />
<BarChart data={data} />
</MainComponent>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.