React实现URL缩短功能时点击按钮后加载提示显示异常

现有代码的核心逻辑问题 #

• 触发时机完全错位：useEffect绑定了fullUrl作为依赖，导致组件刚挂载、每次输入框变动就自动发送缩短请求，完全脱离了「点击按钮才发起缩短」的预期。当前按钮点击事件仅设置了isPending = true，并没有触发实际的请求流程。
• 加载态永远不会复位：请求完成的回调里，把原本用于关闭加载态的setIsPending(false)注释掉了，导致一旦点击按钮显示Loading，状态就永远停留在加载中。
• 没有流程分支控制：请求执行、加载态切换、结果展示的状态流转没有形成闭环，导致结果和加载提示会同时显示。

具体调整步骤 #

1. 把原本写在useEffect中的请求逻辑抽成独立的异步处理函数，不再让请求随页面渲染自动触发
2. 调整函数内部的状态流转：函数触发时先开启加载态、清空上一次的结果和错误提示，再发起请求；请求流程完全结束（无论成功、失败）后，在finally块中统一关闭加载态
3. 把这个异步处理函数绑定到Shorten按钮的onClick事件上，替换原来仅设置加载状态的loadMsg逻辑
4. 增加基础的错误兜底，避免请求异常时加载态卡死、页面无反馈

调整后的核心参考代码 #

import { useState } from "react";

const Shorten = () => {
    const [shortLink, setShortLink] = useState(null);
    const [isPending, setIsPending] = useState(false);
    const [input, setInput] = useState('');
    const [error, setError] = useState(null);
    const baseUrl = "https://api.shrtco.de/v2/shorten?url=";

    // 绑定到点击事件的缩短流程处理
    const handleShorten = async () => {
        // 空输入校验
        if (!input.trim()) {
            setError("请输入需要缩短的长链接");
            return;
        }
        // 流程初始化：开启加载态，清空旧结果
        setIsPending(true);
        setShortLink(null);
        setError(null);

        try {
            const res = await fetch(baseUrl.concat(input));
            const data = await res.json();
            if (!data.ok) throw new Error(data.error || "链接缩短失败，请检查输入格式");
            setShortLink(data.result.short_link);
        } catch (err) {
            setError(err.message);
        } finally {
            // 无论请求成功/失败，最终都关闭加载态
            setIsPending(false);
        }
    }

    return (
        <main>
            <section className="purple-card">
                <input 
                    onInput={e => setInput(e.target.value)} 
                    type="text" 
                    placeholder="Shorten a link here..." 
                    className="shorten-input"
                />
                <button className="shorten-it" onClick={handleShorten}>Shorten It!</button> 
            </section>
            <section className="white-card">
                {isPending && <div className="loading-text">Loading...</div>}
                {error && <div className="error-text">{error}</div>}
                {shortLink && <div className="shorten-text">{shortLink}</div>}
                <hr></hr>
                <button className="shorten-it" disabled={!shortLink}>Copy</button> 
            </section>
        </main>
    );
}

export default Shorten;

调整后可实现的预期效果 #

• 页面初始渲染时不会自动发起请求，Loading提示不会显示
• 点击Shorten按钮后，立刻显示Loading提示，同时触发缩短请求
• 缩短流程结束后，自动隐藏Loading提示：成功则展示生成的短链接，失败则展示错误提示
• 加载过程中不会提前渲染已生成的短链内容

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