React.js页面刷新后无法渲染数据，如何解决该问题？

核心原因 #

useEffect 是组件挂载完成后才执行，所以首次渲染时 API 还没返回数据，Result 组件拿到的是初始空值，如果没做兜底处理，页面就会空白。下面是具体解决思路：

方案1：根组件（App）统一管理数据状态 #

把数据、加载状态、错误状态都放在 App 组件里，通过 props 把状态和触发请求的方法传递给子组件，这样刷新页面时 App 会先初始化请求，同时给 Result 组件提供加载/错误状态的 UI 兜底。

示例代码：

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 页面加载时自动调用API
  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        const res = await fetch('你的API地址');
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchInitialData();
  }, []);

  // 给Search组件传递搜索触发方法
  const handleSearch = async (searchParams) => {
    setLoading(true);
    try {
      const res = await fetch(`你的API地址?${new URLSearchParams(searchParams)}`);
      const result = await res.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="app-container">
      <Home onSearch={handleSearch} />
      {/* 加载/错误/空数据兜底 */}
      {loading && <div className="loading">正在加载...</div>}
      {error && <div className="error">加载失败：{error}</div>}
      {!loading && !error && data && <Result data={data} />}
      {!loading && !error && !data && <div className="empty">暂无数据</div>}
    </div>
  );
}

// Search组件只负责触发搜索
function Search({ onSearch }) {
  const [keyword, setKeyword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch({ keyword });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <button type="submit">搜索</button>
    </form>
  );
}

方案2：用Context管理全局搜索状态 #

如果组件层级深，props 传递太繁琐，可以用 React Context 把搜索相关的状态和方法封装起来，所有需要的组件直接从 Context 取数据，不用层层传递。

示例代码：

// 创建搜索上下文
const SearchContext = createContext();

// 上下文提供者组件
function SearchProvider({ children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 通用请求方法
  const fetchData = async (params = {}) => {
    setLoading(true);
    try {
      const res = await fetch(`你的API地址?${new URLSearchParams(params)}`);
      const result = await res.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // 初始化请求
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <SearchContext.Provider value={{ data, loading, error, fetchData }}>
      {children}
    </SearchContext.Provider>
  );
}

// App组件包裹在Provider里
function App() {
  return (
    <SearchProvider>
      <Home />
      <Result />
    </SearchProvider>
  );
}

// Search组件从Context拿方法
function Search() {
  const { fetchData } = useContext(SearchContext);
  const [keyword, setKeyword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    fetchData({ keyword });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

// Result组件从Context拿状态和数据
function Result() {
  const { data, loading, error } = useContext(SearchContext);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;
  if (!data) return <div>暂无数据</div>;

  return (
    <div className="result-list">
      {/* 渲染数据列表 */}
      {data.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

关键注意点 #

• 必须给 Result 组件添加加载状态、错误状态、空数据的兜底 UI，避免页面出现空白。
• API 调用要放在 async/await 里，同时处理异常，防止请求失败导致状态卡住。

内容的提问来源于stack exchange，提问作者Asish Kumar Nayak