如何在 NextJS 的 getServerSideProps() 中访问 state 变量？

Question

Intro介绍

Hi all, I am new to NextJS.大家好，我是 NextJS 的新手。 I am building a weather application using external APIs.我正在使用外部 API 构建天气应用程序。 I am fetching data from API and presenting it on frontend.我正在从 API 获取数据并将其呈现在前端。

What I want?我想要的是？

I am fetching the data using getServerSideProps() .我正在使用getServerSideProps()获取数据。 But what I want is that the user/client enters the city in the input box and then clicks and finally see the weather details of the respective city.但我想要的是用户/客户端在输入框中输入city ，然后点击，最后看到各自城市的天气详情。

what I had done?我做了什么？

For this, I had defined a city state in the component but now I want that city to be get accessed in getServerSideProps() .为此，我在组件中定义了一个city state，但现在我希望在getServerSideProps()中访问该城市。

How to do that?怎么做？

Code代码

import Head from "next/head";
import {useState} from 'react';
import Today_highlight from "./components/Today_highlight";
import Weather_Today from "./components/Weather_Today";
import Weather_week from "./components/Weather_week";

export default function Home({ results, results1 }) {
  //console.log("res1 = ",results1);
  const [city, setCity] = useState('Bhopal');

  const handleChange = (e) => {
    setCity(e.target.value);  
    //console.log(city)
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    window.location.reload();
  }

  return (
    <>
      <Head>
        <title>Weather-Lytics</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="min-h-full bg-red-400 flex flex-col lg:flex-row">
        <label htmlFor="inputcity" className="w-15">Enter City</label>
        <input
          type="email"
          className="form-control w-56 h-8"
          id="inputcity"
          value={city}
          placeholder="Enter city"
          onChange={handleChange}
        />
        <button className="p-1 bg-slate-600 m-auto p-auto" onSubmit={handleSubmit}> Click</button>
        <div className="bg-blue-300 w-full lg:w-1/4 lg:h-full">
          <Weather_Today results={results} />
        </div>
        <div className="bg-green-500 w-full lg:h-full ">
          <div className="min-h-full flex flex-col">
            <div className="bg-yellow-400 w-full">
              <Weather_week results1={results1} />
            </div>
            <div className="bg-orange-600 w-full">
              <Today_highlight results={results} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}



export async function getServerSideProps({query}) {
  

   //hereI want to access the city state
  //query.term = city; 

  if(!query.term) 
    query.term = 'Bhopal'

  //api-1
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${query.term}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
  const res = await fetch(url);
  const data = await res.json();
  //console.log(data);

  //api-2
  const url1 = `http://api.openweathermap.org/data/2.5/forecast?q=${query.term}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
  const res1 = await fetch(url1);
  const data1 = await res1.json();
  //console.log(data1);

  return {
    props: {
      results: data,
      results1: data1,
    },
  };
}

Also I am in doubt whether the code inside `handleSubmit` is correct way to fetch data?另外我怀疑`handleSubmit`中的代码是否是获取数据的正确方法？

Answer 1

State variables from the client-side can't be accessed from getServerSideProps as it runs on the server. State 客户端的变量无法从getServerSideProps访问，因为它在服务器上运行。 You have to pass the data through query params to make it available server-side.您必须通过查询参数传递数据以使其在服务器端可用。

To pass city as a query parameter to be picked up in getServerSideProps you can use router.push inside the handleSubmit function.要将city作为查询参数传递给getServerSideProps ，您可以在handleSubmit function 中使用router.push 。

const handleSubmit = (e) => {
    e.preventDefault();
    router.push(`/?term=${city}`);
}

如何在 NextJS 的 getServerSideProps() 中访问 state 变量？

问题描述

Intro介绍

What I want?我想要的是？

what I had done?我做了什么？

Code代码

Also I am in doubt whether the code inside `handleSubmit` is correct way to fetch data?另外我怀疑`handleSubmit`中的代码是否是获取数据的正确方法？

1 个解决方案

解决方案1
2 已采纳 2022-03-22 13:23:55

如何在 NextJS 的 getServerSideProps() 中访问 state 变量？

问题描述

Intro介绍

What I want?我想要的是？

what I had done?我做了什么？

Code代码

Also I am in doubt whether the code inside handleSubmit is correct way to fetch data?另外我怀疑handleSubmit中的代码是否是获取数据的正确方法？

1 个解决方案

解决方案1 2 已采纳 2022-03-22 13:23:55

Also I am in doubt whether the code inside `handleSubmit` is correct way to fetch data?另外我怀疑`handleSubmit`中的代码是否是获取数据的正确方法？

解决方案1
2 已采纳 2022-03-22 13:23:55