Next.js中如何解决HTTP请求回调变量无法在JSX中使用的问题

你通过https.get请求目标URL，在回调里根据响应状态码修改Success变量，但这个变量没法在JSX的三元表达式里正常显示URL的可达状态。

你的代码示例：

var Success = true;
var url = new URL(`https://${link}`);
var req = https.get(
    url,
    function (res) {
        res.statusCode === 200 ? (Success = true) : (Success = false);
        console.log(res);
    }
};

期望在JSX中使用：

<td
    className={`px-4 py-3 ${
        Success
            ? `text-emerald-500`
            : `text-red-500`
    }  text-center`}
>
    {Success ? 'Success' : 'Failed'}
</td>

问题原因 #

1. 异步操作时机问题：https.get是异步请求，JSX渲染的时候请求还没完成，此时Success还是初始的true值；等请求完成回调执行、修改Success时，组件已经渲染完了，不会自动重新渲染。
2. 普通变量不触发React更新：你用var声明的Success是普通变量，不是React的状态变量，就算修改了值也不会触发组件重新渲染，JSX自然不会更新显示。

解决方案 #

要解决这个问题，需要用React的状态管理来跟踪请求状态，并用副作用钩子来发起异步请求：

1. 使用useState定义状态变量 #

用React的useState钩子来存储URL的可达状态，这样修改状态时会自动触发组件重新渲染。

2. 使用useEffect发起异步请求 #

把https.get请求放在useEffect钩子中，确保组件挂载后发起请求，并且依赖link变量，当link变化时重新请求。

修正后的代码示例 #

import { useState, useEffect } from 'react';
import https from 'https';

function UrlStatusCell({ link }) {
    // 初始化状态：默认设为null表示请求未完成
    const [isSuccess, setIsSuccess] = useState(null);

    useEffect(() => {
        if (!link) return;
        
        const url = new URL(`https://${link}`);
        const req = https.get(url, (res) => {
            // 根据状态码更新状态
            setIsSuccess(res.statusCode === 200);
        });

        // 处理请求错误（比如网络故障、域名不存在等）
        req.on('error', () => {
            setIsSuccess(false);
        });

        // 清理函数：组件卸载时取消请求
        return () => {
            req.abort();
        };
    }, [link]); // 依赖link，link变化时重新执行

    // 根据状态渲染不同内容
    if (isSuccess === null) {
        return <td className="px-4 py-3 text-center">检查中...</td>;
    }

    return (
        <td
            className={`px-4 py-3 text-center ${
                isSuccess ? 'text-emerald-500' : 'text-red-500'
            }`}
        >
            {isSuccess ? 'Success' : 'Failed'}
        </td>
    );
}

关键说明 #

• 用useState的setIsSuccess来更新状态，确保触发组件重新渲染。
• 增加了请求错误处理，避免因为网络问题等情况导致状态一直停留在null。
• 加入了清理函数，组件卸载时取消未完成的请求，防止内存泄漏。
• 增加了请求中的状态提示（“检查中...”），提升用户体验。

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