React中使用useEffect是否会引发短暂数据不一致？如何优化？

理解是否正确 #

你的理解完全正确。当person状态更新时，React会立即触发组件重新渲染，此时页面会先显示新的person值，但bio状态还未更新——因为useEffect是在组件渲染完成后才会执行的副作用逻辑，所以这短暂的间隙里会出现新人名搭配旧bio的情况。

解决方法 #

• 同步重置bio状态：在触发person更新的同时手动重置bio，比如用户切换人物时，同时调用setPerson(newName)和setBio(null)。这样组件重新渲染时，bio已经是null，不会再显示旧内容。
• 添加加载状态提示：新增一个isLoading状态，在请求开始时设为true，请求完成（成功/失败）后设为false。渲染时根据isLoading显示加载提示，替代旧的bio内容：

  export default function Page() {
    const [person, setPerson] = useState('Alice');
    const [bio, setBio] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
  
    useEffect(() => {
      let ignore = false;
      setIsLoading(true);
      setBio(null);
      fetchBio(person)
        .then(result => {
          if (!ignore) {
            setBio(result);
            setIsLoading(false);
          }
        })
        .catch(() => setIsLoading(false));
      return () => (ignore = true);
    }, [person]);
  
    return (
      <div>
        <h2>{person}</h2>
        {isLoading ? <p>加载中...</p> : <p>{bio || '暂无个人简介'}</p>}
      </div>
    );
  }
  

• 缓存已请求的bio数据：用状态缓存已经加载过的人物bio，切换回已加载过的人物时直接使用缓存数据，避免重复请求和内容闪烁：

  export default function Page() {
    const [person, setPerson] = useState('Alice');
    const [bioCache, setBioCache] = useState({ Alice: null });
    const [isLoading, setIsLoading] = useState(false);
  
    const currentBio = bioCache[person];
  
    useEffect(() => {
      // 如果已有缓存且不为null，直接跳过请求
      if (currentBio !== null) return;
      
      let ignore = false;
      setIsLoading(true);
      fetchBio(person)
        .then(result => {
          if (!ignore) {
            setBioCache(prev => ({ ...prev, [person]: result }));
            setIsLoading(false);
          }
        })
        .catch(() => setIsLoading(false));
      return () => (ignore = true);
    }, [person, currentBio]);
  
    return (
      <div>
        <h2>{person}</h2>
        {isLoading ? <p>加载中...</p> : <p>{currentBio || '暂无个人简介'}</p>}
      </div>
    );
  }
  

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