0

我知道静态站点生成的想法，这里的问题是，如果 SSG 在构建时获取数据，在我的下一个应用程序中，我使用事件处理程序根据搜索关键字获取一些数据，它的工作原理是如何。

这是我的代码：下面是下一个天气应用程序中 Input 组件的代码，我使用handleSubmit事件处理程序，它从 API 端点获取天气数据。

import React, { useState } from "react";
import PropTypes from "prop-types";
import axios from "axios";

function Input({ onInput }) {
  const [inputText, setInputText] = useState();
  const [placeholder, setPlaceholder] = useState("أخل اسم البلد أو المنطقة...");

  return (
    <form className="hstack gap-3" onSubmit={handleSubmit}>
      <input
        type="text"
        className="form-control me-auto"
        placeholder={placeholder}
        value={inputText || ""}
        onChange={handleInput}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <button type="submit">ابحث</button>

      <style jsx>{`
        input {
          height: 50px;
          border-radius: 10px;
          color: var(--input-color);
          font-weight: 500;
          font-size: 1.1em;
          direction: rtl;
        }
        input:focus-visible {
          color: var(--input-color);
          font-weight: 500;
          font-size: 1.1em;
        }
        input:focus {
          box-shadow: 0 0 0 0.25rem var(--input-shadow-color);
        }
        input::placeholder {
          color: var(--input-placeholder-color);
          font-weight: 500;
          opacity: 0.7;
        }
        button {
          padding: 0.60em 1.3em;
          background-color: var(--search-btn-background-color);
          color: #fff;
          font-weight: 500;
          border: 5px solid var(--search-btn-border-color);
          background-color: var(--search-btn-background-color);
          border-radius: 12px;
          transition: 0.5s;
        }
        button:hover {
          color: #fff;
          background-color: var(--btn-hover-color);
        }
        button:focus {
          box-shadow: 0 0 0 0.25rem var(--search-btn-shadow-color);
        }
      `}</style>
    </form>
  );

  function handleFocus() {
    setPlaceholder("");
  }

  function handleBlur() {
    setPlaceholder("أخل اسم البلد أو المنطقة...");
  }

  function handleInput(event) {
    setInputText(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${inputText}&units=metric&appid=5a60c3e5c70d9f4ad304b2b115b3bf72&lang=ar`
      )
      .then((response) => {
        onInput(response.data);
      })
      .catch((error) => {
        console.log(error);
        onInput(0);
      });

    setInputText("");
  }
}

Input.propTypes = {
  onInput: PropTypes.func.isRequired,
};

export default Input;
4

1 回答 1

0

NextJS 中的 SSG 仅发生在getStaticProps函数内的查询中。

在您的示例中，您的查询位于组件内部，因此在构建时不执行查询，但在运行时照常执行，因此您的搜索功能按预期工作。

于 2022-02-27T10:32:13.897 回答