React dispatch触发action需二次点击才更新state问题修复

你碰到的是React函数组件的**陈旧闭包（Stale Closure）**问题，和useReducer、Context的实现逻辑无关：

• 函数组件每次渲染都会生成独立的闭包，闭包里捕获的state是当前渲染周期的固定值，不会跟着后续状态更新自动变化。
• 第一次点击注册按钮时，onRegisterPressed回调里拿到的state是组件初始渲染时的旧值（errorMessage为空、token为null）。signUp是异步方法，内部dispatch触发状态更新、组件重渲染后，.then()回调持有的还是第一次点击时绑定的旧state引用，自然打印不出更新后的值。
• 第一次更新完成、组件重渲染后，新的闭包才会捕获到更新后的state，这时候第二次点击按钮，.then()里拿到的是上一次更新完成的状态，就会出现“状态延迟一次操作才更新”的现象。

另外你现有reducer还有个隐藏bug：signIn、facebookSignIn、signOut三个action的返回值没有展开原有state，会把初始state里的user字段直接丢掉。

二选一即可，推荐优先用第一种符合React设计规范的写法。

方案1：用useEffect监听状态变化执行副作用 #

不要在调用action的回调里读取state做后续逻辑，把依赖state的操作（跳转、错误提示等）放到useEffect里，监听state变化自动触发，这是React官方推荐的标准写法。
修改页面注册逻辑：

const {state, signUp, clearErrorMessage} = useContext(AuthContext)

// 监听状态变化执行对应副作用
useEffect(() => {
  // 登录/注册成功逻辑
  if (state.token) {
    navigate('Search')
  }
  // 错误提示逻辑
  if (state.errorMessage) {
    console.log('当前最新错误：', state.errorMessage)
    // 此处可以写弹窗、toast提示逻辑
  }
}, [state.token, state.errorMessage, navigate])

const onRegisterPressed = data => {
  // 只负责触发注册动作，不要在回调里读取state
  signUp({name: data.name, password: data.password, email: data.email})
};

同时修复reducer里丢失state字段的问题：

const authReducer = (state, action) => {
  switch (action.type) {
    case 'signIn':
      return {...state, errorMessage: '', token: action.payload.token}
    case 'facebookSignIn':
      return {...state, errorMessage: '', token: action.payload.token}
    case 'clear_error_message':
      return {...state, errorMessage: ''}
    case 'signOut':
      return {...state, token: null, errorMessage: ''}
    case 'add_error':
      return {...state, errorMessage: action.payload}
    default:
      return state
  }
}

原来写在signUp方法里的navigate('Search')可以删掉，统一放到useEffect里处理，避免action逻辑和导航强耦合。

方案2：让action方法直接返回执行结果 #

如果需要在触发操作的回调里立刻拿到执行结果，可以修改signUp等action方法，直接return操作结果，不依赖全局state传值：

const signUp = dispatch => async ({name, email, password}) => {
  try {
    const facebookId = null, age = null, roles = ['ROLE_USER']
    const response = await request.post(
      '/auth/register',
      {facebookId, name, age, email, password, roles}
    )

    await SecureStore.setItemAsync('token', response.data.accessToken)
    await SecureStore.setItemAsync('user_email', email)

    dispatch({type: 'signIn', payload: response.data.accessToken})
    // 直接返回成功结果
    return { success: true, token: response.data.accessToken }
  } catch (err) {
    dispatch({type: 'add_error', payload: 'SIGN_UP_ERROR'})
    // 直接返回失败结果
    return { success: false, error: 'SIGN_UP_ERROR' }
  }
}

页面调用时直接用await拿返回值即可，不需要读取闭包里的state：

const onRegisterPressed = async data => {
  const result = await signUp({name: data.name, password: data.password, email: data.email})
  console.log('注册执行结果：', result)
  // 直接根据result做后续逻辑即可，不用等state更新
};

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