tags: 2021鐵人賽 React

股票代號輸入錯誤當機問題

Day28的文章有提到，當使用者想要輸入股票代號看K線圖時，如果輸入的股票代號是錯誤的，也就是台股並沒有使用者輸入的代號，整個程式會直接當機，因此應該做個防呆機制。

錯誤處理方式

在輸入股票代號的元件設置防呆措施，步驟如下：

• 設置控制錯誤訊息視窗開啟/關閉的state
• 當使用者按下送出時，透過Day29的文章寫的股票代號名稱table，查詢是否有此代號，如果沒有就開啟錯誤訊息，並清空輸入格。

錯誤訊息視窗處理方式

這邊用的是react-bootstrap套件的Modal component，官方範例如下，很簡單易懂：

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

使用者按下送出後執行的程式

如下程式，跟官方範例有一點點不同，我是在使用者按下送出後，透過submitHandler去處理。

const submitHandler = (event) => {
    event.preventDefault();
    if (!stockName[enteredStockNo]) {
      setShow(true);
      setEnteredStockNo('');
    } else {
      props.onStockNoChange(enteredStockNo);
    }
  };

成果

小結

加上防呆機制之後，使用者體驗好很多，雖然是很基本的功能，不過如果沒做，當機的感覺可是很糟的啊～

30天心得

透過這30天的時間做了一個小專案，對於剛接觸React的我，非常充實的學了很多技術，之前主要是在udemy學習React，聽老師講跟自己做真的感覺很不一樣，能夠用課堂上學到的東西，把自己想要做的功能做出來，真的是很開心。