React-Redux登录后用户信息未存入Redux 报TypeError对象不可迭代错误

DevOps 小满

2026-11-3

问题定位与修复方案

TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) 报错来源
这个报错本质是你在App.js中对初始值为null的用户状态做了可迭代操作——比如误用数组解构写法const [user] = useSelector(selectUser)、或者对null值做展开运算。由于Redux中用户状态的初始值是null，本身不具备可迭代属性，只要触发迭代操作就会抛出该错误。
正确取值写法：

// App.js中直接通过useSelector取值，不要额外加解构
const user = useSelector(selectUser);
// 可自行补充空值判断逻辑
useEffect(() => {
  if (!user) return;
  // 用户信息存在时的业务逻辑
}, [user])

Redux store读取到null的时序原因
你当前的登录流程存在异步逻辑顺序问题：拿到登录接口返回的token后，直接触发获取用户信息的userInfo()异步请求，没有等待该请求完成、dispatch写入Redux store的动作执行，就直接调用history.push('/')跳转首页。此时首页组件刚挂载，读取的store还是未更新的初始值null。
修正方式是将登录流程的异步逻辑改为串行await执行，等用户信息写入store后再跳转：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        // 登录获取token
        const res = await axiosInstance.post(`api/accounts/token/`, {
            email: formData.email,
            password: formData.password,
        });
        localStorage.setItem('access_token', res.data.access);
        localStorage.setItem('refresh_token', res.data.refresh);

        // 等用户信息请求完成、Redux更新后再跳转
        await userInfo();
        history.push('/');
    } catch (err) {
        console.error('登录流程异常', err);
    }
};

Redux payload的传参与逻辑不匹配问题
你现在的slice定义和dispatch传参存在结构错位：
UserSlice中login reducer的逻辑是直接将action.payload赋值给state.user，即期望payload为用户信息本身
但你在login.js中dispatch时传入的是嵌套结构{user: currentUser}，会导致store中存储的用户数据多套一层对象
二选一修正即可：

调整dispatch传参，直接传入用户信息作为payload：

// 修正后的dispatch逻辑
await axiosInstance.get(url).then((res) => {
    const currentUser = res.data;
    dispatch(login(currentUser))
})

调整slice的reducer取值逻辑，适配当前的payload结构：

// 修正后的login reducer
login: (state, action) => {
    state.user = action.payload.user;
}

Provider包裹范围校验
你当前的Provider结构只包裹了两个Route组件，需要保证所有路由下的子组件都在Provider的作用范围内，否则会出现组件无法访问Redux store的问题。正常的入口结构需要将Router、Provider放在最外层，覆盖全部渲染组件树：

// 正确的入口渲染结构示例
<Provider store={store}>
  <Router>
    <Route exact path="/login" component={HomeScreen} />
    <Route exact path="/" component={App} />
  </Router>
</Provider>

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