Redux Toolkit提交手机号获OTP，首次点击状态不更新无法跳转

根本原因 #

你遇到的问题核心是Redux的dispatch是异步操作：调用dispatch(createPost(...))后，Redux并不会立即更新状态，此时你立刻通过useSelector读取的phoneNumberHere还是旧值，所以首次点击时phoneNumberHere.posts?.status == 1的条件不成立，自然不会触发跳转。第二次点击时，前一次dispatch的异步操作已经完成，状态更新完毕，条件才满足。

解决方案 #

方案1：等待dispatch异步操作完成（推荐）

如果你的createPost是用Redux Toolkit的createAsyncThunk创建的，dispatch会返回一个Promise，你可以用await等待它完成，直接根据接口返回结果判断逻辑：

const onPressSendCode = async () => {
  try {
    // 等待异步请求完成，unwrap()会抛出请求失败的错误
    const response = await dispatch(createPost(inputContactState.toString())).unwrap();
    
    if (response.status === 1) {
      handleNavigate("OTPEnter", false, { 
        deviceTypeParam: deviceType, 
        contactNumberParam: inputContactState, 
        deviceIdentifierParam: deviceIdentifier, 
        deviceTokenParam: deviceToken 
      });
      setAlertValue(false);
    } else {
      setAlertValue(true);
    }
  } catch (err) {
    // 处理接口请求失败的情况
    setAlertValue(true);
  }
}

方案2：用useEffect监听状态变化

通过useEffect监听phoneNumberHere.posts?.status的变化，当状态符合条件时自动触发跳转：

const MobileNumperEnter = () => {
  const dispatch = useDispatch();
  const phoneNumberHere = useSelector((state) => state.phoneNumber);

  // 监听状态变化，执行跳转逻辑
  useEffect(() => {
    if (phoneNumberHere.posts?.status === 1) {
      handleNavigate("OTPEnter", false, { 
        deviceTypeParam: deviceType, 
        contactNumberParam: inputContactState, 
        deviceIdentifierParam: deviceIdentifier, 
        deviceTokenParam: deviceToken 
      });
      setAlertValue(false);
    } else if (phoneNumberHere.posts?.status !== undefined) {
      // 仅当状态明确返回非1时显示错误
      setAlertValue(true);
    }
  }, [phoneNumberHere.posts?.status, handleNavigate, inputContactState, deviceType, deviceIdentifier, deviceToken]);

  const onPressSendCode = () => {
    // 仅负责触发请求，跳转逻辑交给useEffect处理
    dispatch(createPost(inputContactState.toString()));
  }

  return(<>...</>);
}

注意事项 #

• 方案1更直接，适合需要根据接口返回值立即处理的场景；方案2更符合Redux状态驱动的设计理念，适合状态变化后执行副作用的场景。
• 不要在事件回调内部调用useSelector，React Hooks只能在组件顶层或其他Hooks中使用。

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