React：如何用链式三元运算符实现带默认值的字符串切换

问题分析 #

你的代码存在三个核心问题：

1. 三元运算符逻辑错误："Click" && isSending 的写法颠倒了判断优先级，导致默认值无法正常显示
2. 状态未重置：成功/错误状态没有自动清除，无法切回默认的"Click"文本
3. 失败分支未更新加载状态：原代码中x===0的分支没有设置setIsSending(false)，会导致按钮一直停在加载状态

修正后的代码 #

import { useState } from "react";

export default function App() {
  const [isSending, setIsSending] = useState(false);
  const [success, setSuccess] = useState(null);

  const x = 1; // 可改为0测试失败场景

  const simulateFetching = () => {
    setIsSending(true);
    setSuccess(null); // 发起请求前重置状态，避免上次结果干扰
    setTimeout(() => {
      let requestSuccess = x === 1;
      setSuccess(requestSuccess);
      setIsSending(false);
      
      // 2秒后重置成功/错误状态，切回默认文本
      setTimeout(() => {
        setSuccess(null);
      }, 2000);
    }, 500);
  };

  return (
    <button onClick={simulateFetching}>
      {isSending 
        ? "Sending..." 
        : success === true 
          ? "Success" 
          : success === false 
            ? "Error" 
            : "Click"}
    </button>
  );
}

关键修改点 #

• 调整三元运算符顺序：按照「加载中 → 请求成功 → 请求失败 → 默认」的优先级判断，确保每个状态的文本正确显示
• 请求前重置状态：发起请求时先把success设为null，避免上次的成功/错误状态影响新请求的初始显示
• 统一更新加载状态：无论请求成功还是失败，都设置setIsSending(false)，避免加载状态卡死
• 自动重置结果状态：添加定时器，在请求结果显示2秒后重置success为null，自动切回默认的"Click"文本

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