如何在Next.js/React中获取POST请求返回的JSON响应数据？

方法一：使用原生fetch API（推荐） #

在客户端组件中，直接用fetch发送POST请求并处理返回的响应：

'use client'; // 标记为客户端组件

import { useState } from 'react';

export default function UserDetailsForm() {
  const [email, setEmail] = useState('');
  const [userData, setUserData] = useState(null);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setUserData(null);

    try {
      const response = await fetch('/api/userDetailsHandler', { // 对应你的API路由路径
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }

      const data = await response.json();
      setUserData(data); // 存储返回的用户数据
      console.log('获取到的用户数据:', data);
    } catch (err) {
      setError(err.message);
      console.error('请求出错:', err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="输入邮箱"
          required
        />
        <button type="submit">查询用户</button>
      </form>

      {error && <p style={{ color: 'red' }}>{error}</p>}
      {userData && (
        <div>
          <h3>用户信息</h3>
          <pre>{JSON.stringify(userData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

方法二：使用axios库 #

如果习惯用axios，先安装依赖：

npm install axios
# 或
yarn add axios

再在客户端组件中使用：

'use client';

import { useState } from 'react';
import axios from 'axios';

export default function UserDetailsForm() {
  const [email, setEmail] = useState('');
  const [userData, setUserData] = useState(null);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setUserData(null);

    try {
      const response = await axios.post('/api/userDetailsHandler', { email });
      setUserData(response.data);
      console.log('获取到的用户数据:', response.data);
    } catch (err) {
      setError(err.response?.data?.message || err.message);
      console.error('请求出错:', err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="输入邮箱"
          required
        />
        <button type="submit">查询用户</button>
      </form>

      {error && <p style={{ color: 'red' }}>{error}</p>}
      {userData && (
        <div>
          <h3>用户信息</h3>
          <pre>{JSON.stringify(userData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

关键注意事项 #

• 确认API路由路径正确：如果你的路由文件是pages/api/userDetailsHandler.js（或App Router下的app/api/userDetailsHandler/route.js），请求路径就是/api/userDetailsHandler。
• 必须在客户端组件中发送请求：无'use client'指令的服务器组件无法直接发起客户端请求，需通过客户端组件或Server Actions实现。
• 修复API路由的小问题：你的代码中else if(req.method = "GET")是赋值操作，应改为else if(req.method === "GET")避免逻辑错误。
• 做好错误处理：务必捕获网络错误、HTTP非200状态码等异常情况。

内容的提问来源于stack exchange，提问作者Meshack