React不使用useEffect获取更新后state并触发导航的问题求助

问题根源 #

当前代码中，getProfile是异步函数，调用后立刻执行handleContactConnected，但React的setState是异步批量更新的——此时setProfile(response.profile)还未完成状态更新，profile.profile_id依然是初始的undefined，导致导航路径错误。

方案1：直接使用异步请求返回的原始数据 #

既然getProfile内部已经拿到了完整的profile数据，完全可以直接用这个返回值执行导航，无需等待组件state更新。

修改后的代码：

import React from 'react';
import { useNavigate } from 'react-router-dom';

export function App(props) {
  const [profile, setProfile] = React.useState({});
  const navigate = useNavigate();

  // 修改getProfile，返回获取到的profile对象
  const getProfile = async (phoneNumber) => {
    const response = await checkProfile(phoneNumber);
    const targetProfile = response.code === 1 ? response.profile : {};
    setProfile(targetProfile);
    return targetProfile;
  };

  // 让handleContactConnected接收profile参数，不依赖组件state
  const handleContactConnected = (targetProfile) => {
    if (targetProfile.profile_id) {
      navigate(`/profile/${targetProfile.profile_id}`);
    }
  };

  React.useEffect(() => {
    // 等待getProfile执行完成，用返回的profile直接导航
    const init = async () => {
      const fetchedProfile = await getProfile('00000000');
      handleContactConnected(fetchedProfile);
    };
    init();
  }, []);

  return (
    <div className='App'>
    </div>
  );
}

方案2：将导航逻辑直接嵌入异步请求中 #

如果handleContactConnected仅用于此次初始化导航，可以直接把导航逻辑合并到getProfile内部，进一步简化代码：

import React from 'react';
import { useNavigate } from 'react-router-dom';

export function App(props) {
  const [profile, setProfile] = React.useState({});
  const navigate = useNavigate();

  const getProfile = async (phoneNumber) => {
    const response = await checkProfile(phoneNumber);
    if (response.code === 1) {
      const targetProfile = response.profile;
      setProfile(targetProfile);
      // 获取到有效profile后直接导航
      navigate(`/profile/${targetProfile.profile_id}`);
    } else {
      setProfile({});
    }
  };

  React.useEffect(() => {
    getProfile('00000000');
  }, []);

  return (
    <div className='App'>
    </div>
  );
}

核心思路 #

两个方案的本质都是绕过React state的异步更新特性——既然异步请求已经拿到了目标数据，就直接用这个原始数据执行导航，不需要等待组件state更新完成。这种方式既符合“不使用useEffect监听profile”的要求，也避免了state更新延迟带来的问题。

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