Javascript 根据用户在页面中的选择多次获取远程数据

我正在使用next js开发一个web应用程序。我有以下网页：

<page>
   <component_1>
     Fetch the data from remote server using `getInitialProps` (I could use `getStaticProps` or `getServerSideProps` too)
     Show the data to user and get the user input, pass on to component_2
   </component_1>
   <component_2>
      Based on the user selection, fetch remote data and show it in the page
   </component_2>
</page>

使用“getInitialProps”从远程服务器获取数据（我也可以使用“getStaticProps”或“getServerSideProps”）
向用户显示数据并获取用户输入，然后传递到组件2
根据用户选择，获取远程数据并在页面中显示

在用户交互期间，

组件_1

或

组件_2

可见。

getInitialProps

仅允许在页面级组件（URL加载）上使用，而不允许在子组件中调用（这样，我无法从

组件_2

获取远程数据）。我应该使用不同的URL来处理这种情况吗？还是在同一页中有更好的处理方式？

---

提前谢谢你的帮助

getStaticProps

、

getInitialProps

和

getServerSideProps

是为预先呈现的页面和组件获取数据的函数

组件需要根据用户操作获取数据，因此只需要在客户端获取数据您可以在客户端的任何React组件中获取数据

使用钩子的示例。但是，您可以使用任何更好的方法来获取数据

import useSWR from 'swr'

function Profile() {
    const { data, error } = useSWR('/api/user', fetch)

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    return <div>hello {data.name}!</div>
}

从“swr”导入useSWR
函数配置文件（）{
const{data，error}=useSWR（'/api/user'，fetch）
如果（错误）返回无法加载
如果（！数据）返回加载。。。
返回hello{data.name}！
}

---

建议阅读：

getStaticProps

，

getInitialProps

和

getServerSideProps

是为预呈现的页面和组件获取数据的函数

组件需要根据用户操作获取数据，因此只需要在客户端获取数据您可以在客户端的任何React组件中获取数据

使用钩子的示例。但是，您可以使用任何更好的方法来获取数据

import useSWR from 'swr'

function Profile() {
    const { data, error } = useSWR('/api/user', fetch)

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    return <div>hello {data.name}!</div>
}

从“swr”导入useSWR
函数配置文件（）{
const{data，error}=useSWR（'/api/user'，fetch）
如果（错误）返回无法加载
如果（！数据）返回加载。。。
返回hello{data.name}！
}

---

建议阅读：

您必须将用户设置存储在上下文或存储管理器中，这也解决了组件之间的数据通信问题存储组件之间的数据不是问题，根据用户在组件1中选择的选项，我需要进行远程查询并获取数据，我在哪里对第二个组件进行远程查询是一个问题。这是一个基于意见的问题，因为有很多方法可以围绕这个问题进行设计。我建议阅读@NikolaiKiselev:nextjs标准化远程查询：您必须在上下文或存储管理器中存储用户设置，这也解决了组件之间的数据通信问题组件之间的数据存储不是问题，根据用户在组件_1中选择的选项，我需要进行远程查询并获取数据，我在哪里对第二个组件进行远程查询是一个问题。这是一个基于意见的问题，因为有很多方法可以围绕这个问题进行设计。我建议阅读@NikolaiKiselev:nextjs标准化远程查询：