ReactJS问题：页面多次访问、POST请求重复发送原因排查

现象是否正常？ #

这种行为不完全正常，但部分现象属于React开发环境的特性，需要拆分来看：

• 开发环境下出现2次POST请求：是React Strict Mode的预期检测行为，生产环境会自动恢复为1次。
• 组件渲染6次：是Strict Mode、多次状态更新、可能的父组件/路由触发叠加导致的，属于可优化的异常。

问题根源拆解 #

1. 组件重复渲染的原因 #

• React Strict Mode：开发环境中，Strict Mode会刻意重复调用组件函数、useEffect、状态更新等逻辑，用于检测潜在副作用问题，这会让原本的渲染次数翻倍。
• 多次独立状态更新：代码中调用setFirstName和setLastName两次单独的状态更新，每次setState都会触发组件重新渲染，额外增加2次渲染。
• 父组件/路由触发：如果Profile被其他父组件包裹，父组件的状态变化或路由的重复匹配，也会导致子组件跟着重复渲染。

2. POST请求次数的变化逻辑 #

• 优化前：请求未被useEffect包裹，每次组件渲染都会执行axios.post，因此渲染6次就发送6次请求。
• 优化后：空依赖useEffect本应只在组件挂载时执行1次，但Strict Mode在开发环境下会模拟组件卸载再重新挂载，导致useEffect执行2次，因此出现2次请求。生产环境下Strict Mode自动关闭，请求会恢复为1次。

3. 代码中的其他潜在问题 #

• 错误处理无效：try/catch无法捕获axios.post的异步错误，因为axios.post返回Promise，try/catch仅能捕获同步代码错误，异步错误需要用.catch()或async/await配合try/catch。
• 冗余的localStorage读取：每次组件渲染都会执行localStorage.getItem('user')，虽性能影响小，但可放到useEffect中避免重复读取。
• 分散的状态更新：两个独立状态变量会触发两次渲染，合并为一个状态对象可减少渲染次数。

解决方案 #

1. 修复请求逻辑与状态管理 #

将useEffect改为async/await形式确保错误捕获，同时合并状态更新、优化localStorage读取时机：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Profile = () => {
    // 合并状态，减少渲染次数
    const [profile, setProfile] = useState({ firstName: null, lastName: null });

    useEffect(() => {
        const fetchProfileData = async () => {
            try {
                const user = localStorage.getItem('user');
                const res = await axios.post('/profile', { user }, {
                    headers: { 'Content-Type': 'application/json' }
                });
                const obj = JSON.parse(res.data);
                setProfile({
                    firstName: obj.firstname,
                    lastName: obj.lastname
                });
            } catch (err) {
                console.log("Error:" + err.message);
            }
        };
        fetchProfileData();
    }, []);

    return (
        <div className="medium-text">
            <div className="center">
                <h2>User profile data</h2>
                {profile.firstName && <div>First name: {profile.firstName}</div>}
                {profile.lastName && <div>Last name: {profile.lastName}</div>}
            </div>
        </div>
    );
}

export default Profile;

2. 处理Strict Mode的影响 #

若开发环境的重复请求/渲染干扰调试，可暂时关闭项目根组件的StrictMode包裹，但不建议长期关闭——它能帮你提前发现组件的副作用问题。

3. 排查父组件与路由 #

检查Profile的父组件是否存在不必要的状态更新，或路由配置是否有重复匹配情况（比如嵌套路由、路由守卫重复触发），这些都可能导致组件多次挂载。

总结 #

• 开发环境下的2次请求是Strict Mode的正常检测行为，生产环境会自动恢复为1次；
• 6次渲染可通过合并状态更新、优化逻辑减少；
• 代码中的错误处理和状态管理方式需要调整，避免无效逻辑和额外渲染。

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