Redux Selector返回根状态引发无限警告，个人资料页无法加载

核心问题 #

1. Redux选择器引发不必要重渲染：useSelector(state => state)直接返回整个Redux根状态，任何全局状态变更都会触发组件重渲染，这就是控制台警告的来源，同时会加剧无限循环问题。
2. 无限请求循环：getProfileUsers获取到用户数据后，没有将新用户添加到profile.users数组中，导致useEffect每次检查都判定目标用户不存在，重复发起请求。
3. 状态初始化不匹配：userData初始化为数组[]，但实际要存储的是用户对象，导致渲染时的判断逻辑出现偏差。

具体修复步骤 #

1. 优化Redux选择器，精准获取所需状态 #

修改Info.jsx中的useSelector，只提取组件需要的字段，避免不必要的重渲染：

// 原代码
const { auth, profile } = useSelector(state => state);

// 修改为
const authUser = useSelector(state => state.auth.user);
const profileUsers = useSelector(state => state.profile.users);
const authToken = useSelector(state => state.auth.token);

2. 完善profileAction的数据更新逻辑 #

在getProfileUsers中，获取到用户数据后必须dispatchGET_USER动作，将新用户存入Redux的profile.users数组：

export const getProfileUsers = ({users, id, auth}) => async (dispatch) => {
    if(users.every(user => user._id !== id)){
        try {
            dispatch({type: PROFILE_TYPES.LOADING, payload: true})
            const res = await getDataAPI(`/user/${id}`, auth.token)
            
            // 新增：将获取到的用户数据添加到Redux状态中
            dispatch({
                type: PROFILE_TYPES.GET_USER,
                payload: res.data
            })

            dispatch({type: PROFILE_TYPES.LOADING, payload: false})
        } catch (err) {
            dispatch({
                type: GLOBALTYPES.ALERT, 
                payload: {error: err.response.data.msg}
            })
            dispatch({type: PROFILE_TYPES.LOADING, payload: false})
        }
    }
}

同时确保你的Redux reducer中处理GET_USER类型，将新用户追加到数组：

// 示例reducer逻辑
case PROFILE_TYPES.GET_USER:
    return {
        ...state,
        users: [...state.users, action.payload]
    }

3. 修复useEffect依赖与状态初始化 #

• 将userData初始化为null，匹配用户对象的类型：

const [userData, setUserData] = useState(null)

• 更新useEffect的依赖和逻辑，使用优化后的精准状态：

useEffect(() => {
    if(id === authUser._id){
        setUserData(authUser)
    }else{
        // 先从已加载的用户中查找，避免重复请求
        const targetUser = profileUsers.find(user => user._id === id)
        if(targetUser){
            setUserData(targetUser)
        }else{
            dispatch(getProfileUsers({users: profileUsers, id, auth: { token: authToken }}))
        }
    }
}, [id, authUser, profileUsers, dispatch, authToken])

4. 优化渲染逻辑的判断 #

因为userData初始化为null，渲染时可以添加加载提示，提升体验：

{userData ? 
  <div className="info_container" key={userData._id}>
    {/* 原有渲染内容 */}
  </div> : 
  <div>加载中...</div>
}

额外优化建议 #

• 利用profile中的LOADING状态控制加载提示，避免重复展示
• 可以给getProfileUsers添加防抖逻辑，防止短时间内多次触发请求

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