React中如何正确使用fetch获取的数据设置document title

你遇到的问题来自两处代码逻辑错误：

1. 设置页面标题的useEffect依赖数组为空，只会在组件首次挂载时执行1次。此时GitHub接口请求还未返回，你初始化的data状态默认值是null，直接读取null.name就会触发类型错误。手动刷新页面时组件会重新挂载、请求重新发起，时序问题会稳定触发这个报错。另外空依赖的effect不会在接口返回新数据后重新执行，就算不报错也拿不到最新的data.name更新标题。
2. fetch请求链里的.then( setLoading( false ) )写法错误：这里会立即执行setLoading(false)，而不是等接口响应完成后再执行，等于请求刚发出就关闭了loading状态，逻辑不符合预期。

• 修正fetch链式调用的写法，把状态更新逻辑包在函数里，确保等接口响应完成后再执行，同时补充异常场景下的loading状态重置
• 给设置标题的useEffect加上data作为依赖，同时增加空值校验，只有拿到有效用户数据后才更新页面标题，避免读取空值属性
• 增加默认兜底标题，请求未完成、请求异常时页面标题也能正常显示

修复后的完整代码参考：

useEffect( () => {
    if ( !login ) return;
    setLoading( true );
    fetch( `https://api.github.com/users/${login}` )
        .then( ( response ) => {
            if (!response.ok) throw new Error('Request failed');
            return response.json();
        })
        .then( (res) => {
            setData(res);
            setLoading(false);
        })
        .catch( err => {
            setError(err);
            setLoading(false);
        })

}, [login] );

useEffect(() => {
    // 空值兜底，data不存在时显示默认加载标题
    if (!data || !data.name) {
        document.title = 'Loading User Profile...';
        return;
    }
    document.title = `Congratulations ${data.name}'s on Learning React`;
// 把data加入依赖数组，data更新时自动重新设置标题
}, [data])

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