Javascript 如何在不同的js文件中将API数据从一个组件传递到另一个组件？

假设我想将下面代码中的

getData

axios请求中的数据传递给react应用程序中位于不同文件中的另一个函数

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>
    );
}

导出默认函数Bucket（）{
const{slug}=useParams（）；
const classes=useStyles（）；
const[data，setData]=useState（{bucket:[]}）；
useffect（（）=>{
获取（'bucket/'+slug+'/'）。然后（（res）=>{
setData（{bucket:res.data}）；
console.log（res.data）；
});
}，[setData，slug]）；
常量getData=（）=>{
轴位
.get（'bucket/fin data/'+slug）。然后（（响应）=>{
console.log（响应）
})
}
返回(
{data.bucket.name}
{data.bucket.about}
获取数据
);
}

我如何将数据传递给另一个组件，而不是调用我的API两次？我看到的大多数示例都使用类，我希望使用函数

例如，如何将数据传递到此图表，特别是我标记的位置。欢迎使用伪代码，如果需要，请围绕示例图表进行更改：

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>

const条形图=（）=>{
返回(

在React中， 您可以通过两种最常见的方式传递数据：

一,

• 将回调函数从公共主组件传递到子组件
• 异步操作完成后，使用数据执行它
• 将数据与道具一起提供给另一个组件

导出默认函数Bucket（{onGetData}）{
const{slug}=useParams（）；
const classes=useStyles（）；
const[data，setData]=useState（{bucket:[]}）；
useffect（（）=>{
获取（'bucket/'+slug+'/'）。然后（（res）=>{
setData（{bucket:res.data}）；
console.log（res.data）；
});
}，[setData，slug]）；
常量getData=（）=>{
轴位
.get（'bucket/fin data/'+slug）。然后（（响应）=>{
onGetData（响应）；
console.log（响应）
})
}
返回(
{...}
获取数据
);
}

导出默认函数MainComponent（）{
const[data，setData]=useState（{}）；
const onGetData=（结果）=>{
设置数据（结果）；
};
返回(
);
}

您可以通过任何状态管理器：Redux、Mobx，例如

作为回应， 您可以通过两种最常见的方式传递数据：

一,

• 将回调函数从公共主组件传递到子组件
• 异步操作完成后，使用数据执行它
• 将数据与道具一起提供给另一个组件

导出默认函数Bucket（{onGetData}）{
const{slug}=useParams（）；
const classes=useStyles（）；
const[data，setData]=useState（{bucket:[]}）；
useffect（（）=>{
获取（'bucket/'+slug+'/'）。然后（（res）=>{
setData（{bucket:res.data}）；
console.log（res.data）；
});
}，[setData，slug]）；
常量getData=（）=>{
轴位
.get（'bucket/fin data/'+slug）。然后（（响应）=>{
onGetData（响应）；
console.log（响应）
})
}
返回(
{...}
获取数据
);
}

导出默认函数MainComponent（）{
const[data，setData]=useState（{}）；
const onGetData=（结果）=>{
设置数据（结果）；
};
返回(
);
}

您可以通过任何状态管理器：Redux、Mobx，例如

---

谢谢，这很有意义。一般来说，你会推荐哪一个选项，1还是2？如果你的应用程序的架构很简单，使用道具传递数据就足够了。如果你有一个复杂的应用程序，状态管理器会帮助你停止道具链接。谢谢，这很有意义。一般来说，哪一个选项你会推荐ion，1还是2？如果你的应用程序有一个简单的体系结构，使用道具传递数据就足够了。如果你有一个复杂的应用程序，状态管理器将帮助你停止道具链接。