From ca9e6e6a8abc829694c6bc35ab5b4b142af09ff0 Mon Sep 17 00:00:00 2001
From: gracekrcx <kanmorning@gmail.com>
Date: Tue, 28 Jun 2022 16:07:02 +0800
Subject: [PATCH] fix bug #1

---
 README.md                   | 8 +++-----
 components/Search/Search.js | 8 +++++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 2608b1d..4c1c285 100644
--- a/README.md
+++ b/README.md
@@ -28,17 +28,17 @@ Code quality
    4.1 api response 200: 有資料 api response data stored in global  
    4.2 api response 200: 無資料  
    4.3 api response 非 200: 跳出 error notification  
-   4.4 loading start => api => loading end  
+   4.4 loading start => api => loading end
 
 5. 呼叫 useContext 的 component 總是會在 context 值更新時重新 render。如果重新 render component 的操作很昂貴，你可以透過 memoization 來最佳化。(官方文件)（如何證實舉個例子實現這句話，也是蠻有趣的）  
    5.1. createContext: creat a box 裝 state  
-   5.2. useContext: 如果要拿 box 裡的 state  
+   5.2. useContext: 如果要拿 box 裡的 state
 
 6. lodash.debounce  
    6.1 npm web search lodash.debounce 可以看到 jdalton published
 
 7. react-portal  
-   [trendmicro-frontend/react-portal](https://github.com/trendmicro-frontend/react-portal)  
+   [trendmicro-frontend/react-portal](https://github.com/trendmicro-frontend/react-portal)
 
 8. infinite scrolling : new IntersectionObserver  
    8.1 使用 callback ref 取得 DOM [How can I measure a DOM node?](https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node)  
@@ -50,5 +50,3 @@ Code quality
    9.1 context multiple reducers 是符合 context 的設計嗎？  
    9.2 WHY no combineReducers  
    9.3 以 redux 的架構，combineReducer 是官方提供的 method，但 combine multiple reducers in React Hooks 合適嗎
-
-
diff --git a/components/Search/Search.js b/components/Search/Search.js
index 7b52474..551ff7e 100644
--- a/components/Search/Search.js
+++ b/components/Search/Search.js
@@ -22,6 +22,10 @@ export default function Search() {
     }
 
     const handleRouteChange = (url, { shallow }) => {
+      // shallow 代表:
+      // Update the path of the current page 『without』 rerunning 重跑
+      // getStaticProps, getServerSideProps or getInitialProps. Defaults to false
+
       // console.log(
       //   `App is changing to ${url} ${
       //     shallow ? 'with' : 'without'
@@ -29,7 +33,9 @@ export default function Search() {
       // )
 
       const searchKeyword = url.replace('/?q=', '').trim()
-      setKeyword(searchKeyword)
+      if (shallow) {
+        setKeyword(searchKeyword)
+      }
     }
 
     router.events.on('routeChangeError', handleRouteChangeError)