React Redux+Django Djoser认证出现React子元素无效错误排查

这个错误的核心原因是你的Redux状态中isAuthenticated被错误设置成了Response对象，而非预期的布尔值（true/false）。当Login组件判断isAuthenticated为true并尝试跳转时，这个Response对象被意外当作React子元素渲染，触发了"Objects are not valid as a React child"错误。

常见触发场景：

• 登录Action中直接将Djoser API返回的整个Response对象作为payload传给Reducer，而非提取登录成功的布尔状态。
• Reducer中错误把Response对象赋值给isAuthenticated字段，导致该状态脱离布尔类型。
• 若使用React Router v6+，直接返回redirect("/")本身也不符合规范（redirect是函数，不是React元素），但结合错误提示，核心问题还是isAuthenticated的类型异常。

1. 修正登录Action逻辑 #

确保登录请求成功后，传递给Reducer的是布尔值true，而非整个Response对象：

// authActions.js
import axios from 'axios';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAIL = 'LOGIN_FAIL';

export const login = (credentials) => async (dispatch) => {
  try {
    await axios.post('/auth/login/', credentials);
    // 登录成功后传递布尔值true，若需要用户数据可单独提取res.data
    dispatch({
      type: LOGIN_SUCCESS,
      payload: true
    });
  } catch (err) {
    dispatch({
      type: LOGIN_FAIL
    });
  }
};

2. 修正Auth Reducer状态更新逻辑 #

保证isAuthenticated始终为布尔类型：

// authReducer.js
import { LOGIN_SUCCESS, LOGIN_FAIL } from './authActions';

const initialState = {
  isAuthenticated: false, // 初始值设为布尔值
  user: null,
  error: null
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true, // 明确设置为布尔值true
        user: action.payload // 若payload是用户数据，此处赋值给user字段
      };
    case LOGIN_FAIL:
      return {
        ...state,
        isAuthenticated: false,
        error: action.payload
      };
    default:
      return state;
  }
};

export default authReducer;

3. 修正Login组件跳转逻辑 #

如果使用React Router v6+，不要直接返回redirect("/")，改用<Navigate>组件：

// Login.jsx
import { Navigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { login } from './authActions';

const Login = ({ isAuthenticated, login }) => {
  // 表单处理逻辑...

  // 已认证则跳转首页
  if (isAuthenticated) {
    return <Navigate to="/" replace />;
  }

  return (
    <div>
      <h1>登录</h1>
      {/* 登录表单JSX */}
    </div>
  );
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated // 确保此处取到的是布尔值
});

export default connect(mapStateToProps, { login })(Login);

4. 额外检查项 #

• 排查所有渲染isAuthenticated的地方，确保没有在JSX中直接输出该值（比如{isAuthenticated}），若需显示状态，要转换为字符串（比如{isAuthenticated.toString()}）。
• 确认Store配置正确，Auth Reducer已正确合并到根Reducer中。

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