Как получить доступ к переменной состояния в getServerSideProps() в NextJS?

вступление

Привет всем, я новичок в NextJS. Я создаю приложение погоды, используя внешние API. Я извлекаю данные из API и представляю их на интерфейсе.

Что я хочу?

Я извлекаю данные, используя getServerSideProps(). Но я хочу, чтобы пользователь/клиент ввел city в поле ввода, а затем щелкнул и, наконец, увидел сведения о погоде в соответствующем городе.

что я сделал?

Для этого я определил состояние city в компоненте, но теперь я хочу, чтобы этот город был доступен в getServerSideProps().

Как это сделать?

Код

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.info("res1 = ",results1);
  const [city, setCity] = useState('Bhopal');

  const handleChangeEvent = (e) => {
    setCity(e.target.value);  
    //console.info(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 = {handleChangeEvent}
        />
        <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.info(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.info(data1);

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

Также я сомневаюсь, что код внутри `handleSubmit` является правильным способом получения данных?

Если вы хотите передать city в качестве параметра запроса, который будет выбран в getServerSideProps, вы можете сделать router.push(`/?term=${city}`); внутри handleSubmit вместо window.location.reload();.

— 22.03.2022 13:57

Хотя это не ответ на вопрос, который я задал, но эта альтернатива мне помогла

— 22.03.2022 14:26

Вы не можете получить доступ к переменной состояния со стороны клиента внутри getServerSideProps, потому что она работает на сервере. Вы должны передать данные через параметры запроса в getServerSideProps.

— 22.03.2022 14:47

javascript reactjs next.js

22.03.2022 13:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Переменные состояния на стороне клиента недоступны из getServerSideProps, поскольку они выполняются на сервере. Вы должны передать данные через параметры запроса, чтобы сделать их доступными на стороне сервера.

Чтобы передать city в качестве параметра запроса, который будет выбран в getServerSideProps, вы можете использовать router.push внутри функции handleSubmit.

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

22.03.2022 14:23

Другие вопросы по теме

Разрыв URL-адреса ссылки при изменении идентификатора на другую строку

Как я могу настроить таргетинг на определенную позицию прокрутки элементов в прокручиваемом div?

Не удается удалить или обновить ошибку в postman express mongoose

Я пытаюсь отфильтровать выбранный компонент в реакции на основе другого выбора по выбранной дате

React — упаковка всех компонентов в поставщика избыточности с внедрением в магазин, многостраничное приложение

Как я могу дублировать элементы меню, а также данные с сервера rails

Как сопоставить карту в React

Index.js ничего не отображает (ReactJS)

Как я могу отобразить кнопку выбора ввода файла в reactjs

Нарисуйте однодневную диаграмму с областями, используя библиотеку облегченных диаграмм