时间戳

首页 > 解决方案 > 如何让反应等待从 Fetch 获取数据？

reactjs - 如何让反应等待从 Fetch 获取数据？

问题描述

首先，我使用 useReducer 来设置 State。
当组件挂载时，这个 useFetch 钩子将被触发，并且
包含 action（类型和有效负载）的回调将这个初始数据设置为 State（jobInfo）。

import { useEffect, useState } from 'react';

const useFetch = (callback, url) => {
  const [loading, setLoading] = useState(false);

  const fetchInitialData = async () => {
    setLoading(true);
    const response = await fetch(url);
    const initialData = await response.json();
    callback(initialData);
    setLoading(false);
  };

  useEffect(() => {
    fetchInitialData();
  }, []);

  return loading;
};

export default useFetch;

但问题是，当我尝试使用地图时， 由于尚未获取数据而出现not a function错误！ 所以我想知道如何让它等到数据到达？
jobInfo

const JobList = () => {
  const { jobInfo, loading } = useContext(JobInfoContext);

  console.log(jobInfo);
  jobInfo['data'].map((infos) => console.log(infos));
}

标签： reactjsfetch

解决方案

您只需检查数据是否存在。设置状态后，组件将重新渲染：

const JobList = () => {
  const { jobInfo, loading } = useContext(JobInfoContext);

  console.log(jobInfo);
  !loading && jobInfo['data'] && jobInfo['data'].map((infos) => console.log(infos));
}

推荐阅读