React(Next.js)中如何展示API调用返回的成功/错误响应消息

你的提示不显示核心是两个逻辑bug：

• 条件渲染的三元判断没留空状态分支：现有逻辑是只要success为真就显示成功提示，剩下所有情况（包括初始加载时两个状态都是空字符串的场景）都直接渲染错误提示的span标签。初始状态下error是空值，所以这个span里没有任何内容，看起来就像没渲染；后续请求返回时如果状态没正确互斥，也会出现判断混乱。
• 状态更新没有做互斥处理：接口返回成功时你只设置了success值，没清空可能残留的error；接口返回错误时只设置了error值，没清空残留的success，很容易出现判断逻辑和实际状态不匹配的问题。

另外顺便提两个容易踩的连带问题：一是你没给邮箱参数做URL编码，带@等特殊字符的邮箱很容易导致接口参数解析异常；二是如果输入框没绑定value和onChange事件，email状态会一直是空值，根本拿不到用户输入的内容。

1. 调整订阅函数的状态更新逻辑，发请求前先清空旧提示，更新状态时同步清空对立状态，顺便给邮箱参数加编码：

const subscribeMe = async (event) => {
  event.preventDefault();
  // 先清空上一轮的提示
  setError('');
  setSuccess('');
  const emails = email.trim();
  // 邮箱参数做URL编码避免特殊字符问题
  const res = await fetch(`https://example.com/admin-panel/Api/subscribe?email=${encodeURIComponent(emails)}`);
  const { error, message } = await res.json();
  if (error) {
    console.log(error);
    setError(error);
    setSuccess('');
  } else {
    console.log(message);
    setSuccess(message);
    setError('');
  }
};

2. 替换原来的条件渲染代码，先判断是否有提示需要展示，再分别匹配成功、错误状态渲染对应内容，不要用非黑即白的三元判断：

{/* 有成功或错误信息时才渲染提示区域 */}
{(success || error) && (
  <>
    {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>
    )}
  </>
)}

3. 确认两点细节：
   • 上面这段提示渲染代码必须写在组件return返回的JSX结构里，放在表单闭合标签下方，不要写在subscribeMe函数内部，函数内的JSX不会被渲染到页面
   • 邮箱输入框要双向绑定状态：<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />，否则拿不到用户输入的邮箱内容

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