Javascript 如何导出可用作数据提供程序组件的状态

我认为这是一个非常基本的问题，但我想知道默认情况下如何传递状态（数据）或导出它

在下面的代码中，我将一些数据数组传递给setData。我想利用不同页面中的数据。所以我想把下面的代码作为一个提供数据数组的组件。我只是不知道我该不该回去。。或者我必须把它作为一个回调

import React, { useState, useEffect } from 'react';
import axios from "axios";

export default function FetchedData() {
    const [Data, setData] = useState([]);// I want the use the content inside Data in different pages

  useEffect(() => {
    const fetchData = async () =>{
      const {data} = await axios.get("/api/products");
      setData(data);
    }
    fetchData();
    return () => {
      //
    }
  }, [])


}

---

正如所建议的，看起来您正在寻找的是。实际上，没有其他方法可以从一个组件“导出”状态。就功能而言，它本质上允许您在整个组件树中使用共享状态。您可以在任何组件中使用其值，也可以在任何组件中更改其值。实现有点复杂，因此请查看下面的示例，以了解如何在您的特定情况下使用它。

我不确定“将数据导出为单独的组件”是否有意义，但从您想要的内容来看，我认为您是在追求什么？这就是你想要的行为吗？我只想使用数据中的内容。。。在不同的页面中。我不知道如何通过或归还它。我应该导出数据，并且应该能够在其他页面中导入数据。是否希望数据跨页面持久化？那么，在获取数据之后，当您转到一个页面时，该页面已经有了它？假设您使用的是客户端路由，那么，正如Jordan所建议的，使用React上下文可能是一种方法。如果您想要的是一种重用抓取功能的简便方法，那么您可以在不同的页面中创建并使用一个钩子。感谢我们的Maninamsterdam，Robert&Jordan为您提供的宝贵时间。我想在不同的页面中使用数据，我通过引用React定制钩子得到了答案。可以导出状态并将其用作props.callback。有点混乱，但与上下文不同。