iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

用React刻自己的投資Dashboard系列 第 11

用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;

小結

上述程式碼將call api功能分離之後,看起來有比較乾淨一些,主要把資料處理的流程搬移,就可以很快速地看出整個程式的架構,就是定義state,定義update state的方式,定義effect,回傳JSX。

接下來幾篇,就開始做下拉式選單功能,就是依照類別去篩選要呈現的圖表,以及分頁功能,當同一頁的圖表超過3個的時候,就可以點下一頁去看更多圖表。


上一篇
用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式
下一篇
用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言