Next.js中fetch动态传参失效、提交提示不显示问题排查

问题1：接口参数传成字面量{emails}的修复 #

你当前用普通单引号包裹请求URL，JavaScript 普通字符串不会自动解析内嵌的变量，所以{emails}会被当成固定文本传给接口，另外你的代码里还存在域名拼写错误（exmple少写了字母a），会直接导致请求404。

正确传参方式（推荐用URLSearchParams，自动处理特殊字符转义） #

// 发起请求前先拼接参数
const params = new URLSearchParams({ email: emails });
const res = await fetch(`https://example.com/serge/admin-panel/Api/subscribe?${params}`);

注意：模板字符串必须用反引号`包裹，不能用单引号/双引号，变量插值格式为${变量名}。

问题2：成功/失败提示不渲染的修复 #

你写的三元判断逻辑有缺陷：初始状态下success是空字符串（JS里判定为假值），页面会直接走错误分支渲染空的错误提示框；同时提交前没有清空上一次的提示状态，会出现消息残留。

修复后的提示渲染逻辑 #

只有当对应状态有值的时候，才渲染对应的提示节点：

{success && (
  <span className="flex items-center text-sm font-bold text-green-700"> 
    {success}
  </span> 
)}
{error && (
  <span className="flex items-center text-sm font-bold text-red-800">
    {error} 
  </span>
)}

另外要在提交逻辑开头重置旧状态，同时把event.preventDefault()挪到函数最顶部，避免前面代码报错时触发表单默认跳转：

const subscribeMe = async (event) => {
  event.preventDefault();
  // 清空上一次的提示
  setError('');
  setSuccess('');

  const emails = email;
  const params = new URLSearchParams({ email: emails });
  // 后续请求逻辑
}

其他需要修复的代码问题 #

• 输入框写了两个type属性，删掉无效的type="subscribe"，仅保留type="email"
• 输入框补上value={email}的受控绑定，否则提交成功后清空state时输入框内容不会同步清空
• 删掉return末尾多余的3个</div>闭合标签，你的JSX结构里没有对应的开标签，会触发编译报错
• 补上请求异常捕获，避免网络错误时页面直接崩溃

修复后完整可运行代码 #

import React, { useState } from "react";

const Subscribe = () => {
 const [email, setEmail] = useState('');
 const [error, setError] = useState('');
 const [success, setSuccess] = useState('');

const subscribeMe = async (event) => {
  event.preventDefault();
  setError('');
  setSuccess('');

  const emails = email;
  const params = new URLSearchParams({ email: emails });
  
  try {
    const res = await fetch(`https://example.com/serge/admin-panel/Api/subscribe?${params}`);
    const { error: resError, message } = await res.json();
    if (resError) {
      setError(resError);
    } else {
      setSuccess(message);
      setEmail('');
    }
  } catch (err) {
    setError('订阅失败，请检查网络后重试');
  }
};

const changeEmail = (event) => {
  setEmail(event.target.value);
}

return (
  <form className="row g-3" onSubmit={subscribeMe}>
    <div className="col-12">
      <input 
        className="form-control" 
        id="subscribe2" 
        name="email" 
        type="email" 
        placeholder="Please Subscribe"
        value={email}
        onChange={changeEmail}
      />
      <button type="submit" className="btn btn-primary mb-3">subscribe</button>
    </div>
    {success && (
      <span className="flex items-center text-sm font-bold text-green-700"> 
        {success}
      </span> 
    )}
    {error && (
      <span className="flex items-center text-sm font-bold text-red-800">
        {error} 
      </span>
    )}
  </form>
)
}

export default Subscribe;

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