用React刻自己的投资Dashboard Day11 - 分离UI元件与抓取数据元件

tags: `2021铁人赛` `React`

本篇要将call api的功能独立成一个元件，在架构上会更清楚的分工不同档案的功能，之後也有可能是其他元件会呼叫api的功能，因此独立出来会比较方便。

新增call api元件

如下程序码，将原本在Card.js内call api获取资料的那段分离出来，另外写在一个档案。

src/components/Charts/fredAPI.js

const useFredAPI = (series_id) => {
  return fetch(`${process.env.REACT_APP_PROXY_SERVER_URL}/series/observations?series_id=${series_id}&api_key=${process.env.REACT_APP_API_KEY}&file_type=json`, {
    headers: {
      'Target-URL': 'https://api.stlouisfed.org/fred'
    }
  })
    .then((response) => response.json())
    .then((data) => {
      let seriesData = [];
      data.observations.forEach(ob => {
        seriesData.push([new Date(ob.date).getTime(), Number(ob.value)]);
      });
      return seriesData;
    })
};

export default useFredAPI;

引入call api元件

src/components/Charts/Card.js

import styles from './Card.module.css';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
// import api呼叫元件
import fredAPI from './fredAPI';

const Card = (props) => {
  const [chartOption, setChartOption] = useState({
    ...
  });
  
  // 使用async await，确保等待非同步的call api函数获取到资料後才进行state update
  const fetchData = useCallback(async (series_id) => {
    try {
      const seriesData = await fredAPI(series_id);
      setChartOption((prevOption) => {
        return {
          ...prevOption,
          series: [
            {
              name: prevOption.series[0].name,
              data: seriesData
            }
          ]
        }
      })
    } catch (error) {
      console.log(error)
    }
  }, []);

  useEffect(() => {
    fetchData(props.item.series_id);
  }, [fetchData, props]);

  return (
    ...
  )
}

export default Card;