自定义React Hook首次渲染返回null，如何实现首次即返回正确值？

你的问题根源在于：Hook里的useState初始值设为null，而useEffect是组件首次渲染完成后才会执行的，所以第一次调用Hook返回的是初始的null，等useEffect里执行setData后才触发第二次渲染，这时才能拿到正确值。

要让首次调用就返回正确结果，直接在useState初始化时计算参数值即可，不需要依赖useEffect的延迟执行。下面是修改后的代码：

const useGetUrlParams = (params) => {
    // 初始化时直接计算URL参数值
    const getInitialParam = () => {
        if (params === null) {
            return '';
        }
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        return urlParams.get(params);
    };

    // 用计算后的结果作为state初始值
    const [data, setData] = useState(getInitialParam());

    // 保留useEffect监听params参数变化，当传入的params改变时重新计算
    useEffect(() => {
        if (params === null) {
            setData('');
            return;
        }
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const res = urlParams.get(params);
        setData(res);
    }, [params]);

    return [data];
};

如果你的场景需要处理URL参数动态变化（比如单页应用路由跳转、浏览器前进后退），可以再添加上URL变化的监听，让Hook更健壮：

// 抽离公共的参数获取逻辑，避免重复代码
const getUrlParam = (paramKey) => {
    if (!paramKey) return '';
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramKey);
};

const useGetUrlParams = (params) => {
    const [data, setData] = useState(getUrlParam(params));

    useEffect(() => {
        // 当params变化时更新值
        const updateParam = () => {
            setData(getUrlParam(params));
        };
        updateParam();

        // 监听浏览器前进后退导致的URL变化
        window.addEventListener('popstate', updateParam);
        
        // 组件卸载时移除监听
        return () => {
            window.removeEventListener('popstate', updateParam);
        };
    }, [params]);

    return [data];
};

这样修改后，首次渲染就能直接返回正确的URL参数值，同时也能处理后续参数变化的情况。

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