在next.js服务器端渲染中有没有使用useState的方法

niknxzdl  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(143)

我想从客户端获取一个值并在服务器端使用它,
但是我不知道如何使用useState,我知道没有办法在服务器端使用useState,所以有没有解决方案可以使用??!事实上,服务器端有一个URL,我想从客户端获取值,并在该URL中使用${}

whitzsjs

whitzsjs1#

您可以通过请求、查询参数或API端点将客户端值传递给服务器来实现您的目标。
客户端:

import { useState } from 'react';

const MyComponent = () => {
  const [myValue, setMyValue] = useState('');

  const handleSubmit = () => {
    fetch(`/api/myEndpoint?value=${encodeURIComponent(myValue)}`)
      .then((response) => response.json())
      .then((data) => {
        // Do something with the data from the server if needed
        console.log(data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <div>
      <input value={myValue} onChange={(e) => setMyValue(e.target.value)} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

字符串
服务器端:

export default function handler(req, res) {
  const { value } = req.query;

  // use the 'value' received from the client-side 

  res.status(200).json({ message: `Received value: ${value}` });
}

相关问题