React Native中如何获取当前登录用户的详细信息

1. Redux Slice 核心问题 #

你的slice存在两个关键错误：

• 初始状态类型错误：所有用户字段设为空对象{}，但这些字段应为字符串类型，初始值应设为''（空字符串）或null。
• Reducer赋值逻辑错误：addUser和currentUser里把所有字段都赋值成action.payload，导致所有字段都变成同一个值（整个payload对象），正确做法是从payload中解构对应属性分别赋值。

修复后的Slice代码 #

import { createSlice } from '@reduxjs/toolkit'

// 初始值改为字符串类型
const initialState = {
  firstName: '',
  lastName: '',
  phone: '',
  email: '',
  password: '',
}

const ricozoSlice = createSlice({
  name: 'ricozo',
  initialState,
  reducers: {
    addUser: (state, action) => {
      // 从payload中解构对应属性赋值
      state.firstName = action.payload.firstName
      state.lastName = action.payload.lastName
      state.phone = action.payload.phone
      state.email = action.payload.email
      state.password = action.payload.password
    },
    currentUser: (state, action) => {
      // 同理，正确赋值每个字段
      state.firstName = action.payload.firstName
      state.lastName = action.payload.lastName
      state.phone = action.payload.phone
      state.email = action.payload.email
      state.password = action.payload.password
    },
  },
})

export const { addUser, currentUser} = ricozoSlice.actions

export default ricozoSlice.reducer

2. 组件代码问题 #

• 错误导入：从slice里导入的ricozo、email、phone均为不存在的导出项，需删除这些无效导入。
• 错误的phone取值方式：state.ricozo[props.phone]逻辑错误，若要显示当前用户的手机号，直接用state.ricozo.phone即可。
• 初始状态渲染问题：之前初始值为对象，渲染时会显示[object Object]，修复slice初始值后即可正常显示空字符串或正确用户信息。

修复后的组件代码 #

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
// 若组件未用到action可删除此导入
import { currentUser } from './redux/ricozoSlice'

function UserEmail() {
  const email = useSelector((state) => state.ricozo.email)
  const phone = useSelector((state) => state.ricozo.phone)
  const firstName = useSelector((state) => state.ricozo.firstName)

  return (
    <View style={styles.background}>
      <Text>hello </Text>
      <Text>{phone}</Text>
      <Text>{email}</Text>
      <Text>{firstName}</Text>
    </View>
  )
}

const styles = StyleSheet.create({  
  background: {
    padding: 30,
    flex: 1,
    justifyContent:'center'
  },
})

export default UserEmail;

3. 额外注意事项 #

用户登录后，需正确调用currentUser或addUser action，传入完整用户信息的payload示例：

// 假设登录后获取到用户数据
const userData = {
  firstName: 'John',
  lastName: 'Doe',
  phone: '123456789',
  email: 'john@example.com',
  password: 'xxx' // 实际项目请勿存储明文密码
}
// 分发action更新store
dispatch(currentUser(userData))

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