Adakah terdapat cara untuk menggunakan useState dalam pemaparan sebelah pelayan Next.js?

Question

Saya ingin mendapatkan nilai dari pihak pelanggan dan menggunakannya di sisi pelayan,

Tetapi saya tidak tahu cara menggunakan useState, dan saya tahu tiada cara untuk menggunakan useState di bahagian pelayan Jadi adakah terdapat penyelesaian lain yang boleh digunakan sebaliknya? ! Sebenarnya, terdapat url pada bahagian pelayan dan saya ingin mendapatkan nilai daripada klien dan menggunakan ${} dalam url itu.

Answer 1

Anda boleh mencapai matlamat anda dengan menghantar nilai sisi klien ke pelayan melalui permintaan, parameter pertanyaan atau titik akhir API.

Pelanggan:

import { useState } from 'react';

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

  const handleSubmit = () => {
    fetch(`/api/myEndpoint?value=${encodeURIComponent(myValue)}`)
      .then((response) => response.json())
      .then((data) => {
        // 如果需要，可以对从服务器返回的数据进行处理
        console.log(data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

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

Sebelah pelayan:

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

  // 使用从客户端接收到的'value'

  res.status(200).json({ message: `接收到的值：${value}` });
}