组件传递状态未更新：API响应滞后致ComponentTwo无法渲染数据

嘿，这个问题我之前也碰到过，咱们来一步步解决它！核心问题就是API请求和组件导航的时序没对齐，导致ComponentTwo渲染时拿不到数据。这里有两个实用的方案，你可以根据自己的业务场景选：

这个方案逻辑最直接——先在ComponentOne里完成API请求，拿到数据后再跳转到ComponentTwo，同时把数据传过去。这样ComponentTwo一渲染就能拿到数据，还能在ComponentOne显示加载Spinner让用户知道正在处理。

示例代码：

// ComponentOne.jsx
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function ComponentOne() {
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const handleTakePhotoAndSubmit = async () => {
    setIsLoading(true);
    try {
      // 调用手机拍照功能获取照片
      const photo = await takePhoto();
      // 发送照片到API
      const apiResponse = await fetch('/api/upload-photo', {
        method: 'POST',
        body: photo
      });
      const responseData = await apiResponse.json();
      // 拿到响应后再导航，把数据通过路由状态传递
      navigate('/component-two', { state: { data: responseData } });
    } catch (error) {
      console.error('请求失败:', error);
      // 这里可以加用户提示，比如Toast
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {isLoading && <div className="spinner">加载中...</div>}
      <button onClick={handleTakePhotoAndSubmit} disabled={isLoading}>拍照并提交</button>
    </div>
  );
}

ComponentTwo里直接读取路由状态的数据：

// ComponentTwo.jsx
import { useLocation } from 'react-router-dom';

function ComponentTwo() {
  const location = useLocation();
  const data = location.state?.data;

  // 兜底处理（理论上这里不会触发，因为导航是等请求完成后才执行的）
  if (!data) {
    return <div className="spinner">加载中...</div>;
  }

  return (
    <div>
      <h2>API响应内容</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

如果业务要求必须先跳转到ComponentTwo，再等待API响应，那可以用全局状态来统一管理加载状态和响应数据。这里以React Context为例：

1. 先创建全局数据上下文：

// DataContext.jsx
import { createContext, useContext, useState } from 'react';

const DataContext = createContext();

export function DataProvider({ children }) {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [error, setError] = useState(null);

  const fetchPhotoData = async (photo) => {
    setIsLoading(true);
    setError(null);
    try {
      const apiResponse = await fetch('/api/upload-photo', {
        method: 'POST',
        body: photo
      });
      const responseData = await apiResponse.json();
      setApiData(responseData);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <DataContext.Provider value={{ isLoading, apiData, error, fetchPhotoData }}>
      {children}
    </DataContext.Provider>
  );
}

export function useData() {
  return useContext(DataContext);
}

2. 在App根组件里包裹上下文：

// App.jsx
import { DataProvider } from './DataContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';

function App() {
  return (
    <DataProvider>
      <Router>
        <Routes>
          <Route path="/" element={<ComponentOne />} />
          <Route path="/component-two" element={<ComponentTwo />} />
        </Routes>
      </Router>
    </DataProvider>
  );
}

3. ComponentOne里调用全局请求方法后直接导航：

// ComponentOne.jsx
import { useNavigate } from 'react-router-dom';
import { useData } from './DataContext';

function ComponentOne() {
  const navigate = useNavigate();
  const { fetchPhotoData } = useData();

  const handleTakePhotoAndSubmit = async () => {
    const photo = await takePhoto();
    // 启动API请求，不用等待完成就导航
    fetchPhotoData(photo);
    navigate('/component-two');
  };

  return (
    <div>
      <button onClick={handleTakePhotoAndSubmit}>拍照并提交</button>
    </div>
  );
}

4. ComponentTwo里监听全局状态，显示加载或数据：

// ComponentTwo.jsx
import { useData } from './DataContext';

function ComponentTwo() {
  const { isLoading, apiData, error } = useData();

  if (isLoading) {
    return <div className="spinner">加载中...</div>;
  }

  if (error) {
    return <div>请求出错：{error}</div>;
  }

  if (!apiData) {
    return <div>暂无数据</div>;
  }

  return (
    <div>
      <h2>API响应内容</h2>
      <pre>{JSON.stringify(apiData, null, 2)}</pre>
    </div>
  );
}

方案小提醒 #

• 方案1更简单，适合不需要提前进入ComponentTwo的场景，用户体验更顺畅，进入ComponentTwo就能直接看到内容。
• 方案2适合必须先跳转的业务场景，但要注意全局状态的生命周期，比如刷新页面后数据会丢失，必要时可以结合localStorage做持久化。

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