如何将数据从组件传递到 getServerSideProps

Question

我无法弄清楚如何将数据从组件传递到 getServerSideProps，基本上我想要的是获取文本输入的值并将其用作我的 API 调用中的关键字。文本输入将位于“SearchBar”组件中，该组件在我的应用程序的每个页面上都可见，单击按钮时我想使用名为“SearchResults”的适当页面中的输入值进行 API 调用”。最好的方法是什么？

搜索栏：

import { useState } from 'react';

export default function SearchBar() {
  const [keyword, setKeyword] = useState('');

  const handleClick = (event) => {
    event.preventDefault();
    console.log(keyword);
  };
  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button onClick={handleClick}>Fetch</button>
    </div>
  );
}

搜索结果：

import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { keyword } = context;
  const res = await fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${keyword}`
  );
  const data = await res.json();

  return { props: {} };
};

export default function SearchResults() {
  return (
    <div>
      <h1>Teste</h1>
    </div>
  );
}

Answer 1

你用以下形式包装输入：

<form onSubmit={submitHandler} >
     <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
</form>

编写提交处理程序：

const submitHandler = (event) => {
    event.preventDefault();
    if (keyword) {
      Router.push({
        // whatever your baseUrl
        pathname: process.env.BASE_URL,
        query: { keyword: keyword, page: 1 },
      });
    // Optional
    } else if (keyword === "") {
      Router.push({ pathname: "", query: { page: 1 } });
    } else {
      Router.push(Router.router.asPath);
    }
  };

然后在 getServerSideProps 中，您可以按照编写代码的方式进行查询

Answer 2

我猜，您对 textinput 的 api 调用将是客户端调用，因为它需要客户端交互。

So no need to do server side calls.

只需 onChange 调用您的 api，它就会完成。

import { useState } from 'react';

export default function SearchBar() {
  const [keyword, setKeyword] = useState('');

  const handleClick = (event) => {
    event.preventDefault();
    fetchData(keyword);
  };

  const fetchData = async(keyword) => {
     const res = await fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${keyword}`
  );

  const data = await res.json();
  };


  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button onClick={handleClick}>Fetch</button>
    </div>
  );
}

最后，您可以用布局包裹您的组件，这样您的搜索组件将在每个页面中可见。

// pages/_app.js

import SearchComponent from '../components/SearchComponent'

export default function MyApp({ Component, pageProps }) {
  return (
    <div>
      <SearchComponent/>
      <Component {...pageProps} />
    </div>
  )
}

参考这里nextjs layouts

如何将数据从组件传递到 getServerSideProps

How to pass data from a component into getServerSideProps

javascript

reactjs

server-side-rendering

next.js