tags: 2021鐵人賽 React

上一篇刻好版型後，這篇就可以來串接API拉，目標當然就是讓使用者輸入股票代號後，能夠跑出最新收盤價格、漲跌幅度、漲跌幅度百分比，以及最重要的K線圖。

流程說明

台股技術分析的頁面架構如下，Title的部分就是輸入股票代碼的區域，KBarChart的部份則是包含最新收盤價及K線圖。

程式邏輯是先在index.js主檔設定一個state來記錄股票代號，然後將setState的函數透過props傳遞進入Title，當Title輸入股票代號按下送出的時候，會透過函數修改index.js的股票代號state。

而index.js則是會傳遞一個股票代號的state給KBarChart，當這個state被Title改變後，KBarChart就會重新渲染，達到更新頁面資料的效果。

程式部分

直接看GitHub會比較清楚喔，finish taiwan stock kbar chart feature

react-loading套件運用

在程式呼叫API的時候會需要一點點的時間，因此找了一個比較好看的loading animation package，叫做react-loading。

有蠻多種會動的圖案可以選擇的，如下圖：

成果展示

• Demo中畫面
  

• 資料載入完成
  

小結

以上就是台股技術面頁面功能，雖然還來不及把各種技術指標的功能加上去，不過至少有K線可以看，不過完整的看盤功能真的還是需要專業的看盤軟體就是了。

這一頁還有幾個需要改進的地方，第一個是API裡面沒有股票的中文名稱，以及使用者輸入錯誤的代碼時，程式會直接當機，下一篇就會來修改這兩個地方。