React Native Redux登录后currentUser为null的问题如何解决？

问题原因及解决方案 #

1. 空值渲染未做兼容 #

你在组件中直接调用currentUser.name，但Redux初始状态下currentUser为null，异步请求返回前第一次渲染就会触发空指针报错。
解决方法：

• 给渲染逻辑加空值兼容：

  // 写法1：可选链+兜底文案
  <Text>{currentUser?.name ?? '用户信息加载中'}</Text>
  
  // 写法2：提前判断拦截渲染
  function Profile(props) {
    const { currentUser } = props;
    if (!currentUser) return <Text>加载中...</Text>
    // 原有渲染逻辑
  }
  

• 调整Redux userState的初始值，将默认currentUser从null改为空对象{}，避免空指针。

2. fetchUser action未触发 #

你只定义了fetchUser方法，但没有在组件加载/合适的时机调用该action，Redux的state永远不会被更新，currentUser会一直保持初始值。
解决方法：
将fetchUser映射到组件props中，在组件挂载时触发：

import { fetchUser } from '你的action文件路径'
import { useEffect } from 'react'

function Profile(props) {
  const { currentUser, fetchUser } = props;
  // 组件挂载时拉取用户信息
  useEffect(() => {
    fetchUser()
  }, [fetchUser])

  // 原有逻辑
}

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser,
})
// 第二个参数传入需要映射的action
export default connect(mapStateToProps, {fetchUser})(Profile);

3. Firebase鉴权初始化时机问题 #

你直接调用firebase.auth().currentUser.uid拉取数据，此时Firebase的鉴权状态可能还未初始化完成，firebase.auth().currentUser本身就是null，导致请求失败，不会派发更新Redux的action。
解决方法：
添加Firebase鉴权状态监听，确认用户已登录后再发起数据请求：

export function fetchUser() {
  return ((dispatch) => {
    // 监听鉴权状态初始化
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      unsubscribe() // 只监听一次，拿到结果就取消监听
      if (!user) return
      firebase.firestore()
          .collection("Users")
          .doc(user.uid)
          .get()
          .then((snapshot) => {
              if (snapshot.exists) {
                  dispatch({ type: USER_STATE_CHANGE, currentUser: snapshot.data() })
              } else {
                  console.log('用户不存在')
              }
          })
    })
  })
}

4. Reducer逻辑异常 #

检查userState对应的reducer代码，确认USER_STATE_CHANGE的type名称没有拼写错误，并且正确将action携带的currentUser更新到state中。
示例正确reducer写法：

const initialState = {
  currentUser: {} // 初始值建议设为空对象
}

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'USER_STATE_CHANGE': // 要和你action里的type完全一致
      return {
        ...state,
        currentUser: action.currentUser
      }
    default:
      return state
  }
}

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