npm run build → fix terminal Warning message

共計: 83 個 Warning

[x] done

警告訊息：

> npm run build

> baifa@0.1.0 build
> next build

- info Loaded env from /Users/liz/Desktop/BAIFA/.env

Failed to compile.

./src/components/address_detail/address_detail.tsx
41:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/components/all_currencies_page_body/all_currencies_page_body.tsx
70:6 Warning: React Hook useEffect has missing dependencies: 'currenciesOptions', 'currencyList', 'searchRef', and 'sortingOptions'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/blacklist_item/blacklist_item.tsx
29:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/components/block_detail/block_detail.tsx
43:6 Warning: React Hook useEffect has missing dependencies: 'createdTimestamp' and 'timer'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/block_produced_section/block_produced_section.tsx
63:6 Warning: React Hook useEffect has missing dependencies: 'blocks' and 'searchRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/block_tab/block_tab.tsx
26:9 Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
60:6 Warning: React Hook useEffect has missing dependencies: 'blockList' and 'searchRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/date_picker/date_picker.tsx
187:6 Warning: React Hook useEffect has a missing dependency: 'setFilteredPeriod'. Either include it or remove the dependency array. If 'setFilteredPeriod' changes too often, find the parent component that defines it and wrap that definition in useCallback. react-hooks/exhaustive-deps
248:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps
258:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/global_search/global_search.tsx
31:6 Warning: React Hook useEffect has a missing dependency: 'getSuggestions'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/landing_page_body/landing_page_body.tsx
33:30 Warning: The ref value 'scrl.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'scrl.current' to a variable inside the effect, and use that variable in the cleanup function. react-hooks/exhaustive-deps

./src/components/red_flag_list/red_flag_list.tsx
81:6 Warning: React Hook useEffect has missing dependencies: 'searchRef' and 'typeOptions'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/report_exchage_rate_form/report_exchage_rate_form.tsx
43:6 Warning: React Hook useEffect has a missing dependency: 'getExchangeRate'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/top_100_holder_section/top_100_holder_section.tsx
52:6 Warning: React Hook useEffect has missing dependencies: 'holders' and 'searchRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/transaction_history_section/transaction_history_section.tsx
52:6 Warning: React Hook useEffect has a missing dependency: 'addressOptions'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
84:6 Warning: React Hook useEffect has missing dependencies: 'addressOptions', 'searchRef', and 'transactions'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/transaction_tab/transaction_tab.tsx
26:9 Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
61:6 Warning: React Hook useEffect has missing dependencies: 'searchRef' and 'transactionList'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/contexts/app_context.tsx
21:10 Warning: 'isInit' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/contexts/market_context.tsx
94:10 Warning: 'promotion' is assigned a value but never used. @typescript-eslint/no-unused-vars
95:10 Warning: 'chainList' is assigned a value but never used. @typescript-eslint/no-unused-vars
96:10 Warning: 'currencyList' is assigned a value but never used. @typescript-eslint/no-unused-vars
97:10 Warning: 'blacklist' is assigned a value but never used. @typescript-eslint/no-unused-vars
123:6 Warning: React Hook useCallback has a missing dependency: 'setChainList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
136:6 Warning: React Hook useCallback has a missing dependency: 'setCurrencyList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
149:6 Warning: React Hook useCallback has a missing dependency: 'setBlacklist'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
156:6 Warning: React Hook useCallback has missing dependencies: 'getBlacklist', 'getChains', 'getCurrencies', and 'getPromotion'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/lib/hooks/use_outer_click.ts
5:10 Warning: 'componentVisible' is assigned a value but never used. @typescript-eslint/no-unused-vars
21:6 Warning: React Hook useEffect has a missing dependency: 'handleClickOutside'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/blacklist.tsx
28:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
91:6 Warning: React Hook useEffect has missing dependencies: 'blacklist' and 'searchRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/chains/[chainId]/address/[addressId]/index.tsx
69:6 Warning: React Hook useEffect has missing dependencies: 'addressId', 'appCtx', 'chainId', and 'getAddressDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
86:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
284:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/interaction.tsx
99:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
108:6 Warning: React Hook useEffect has missing dependencies: 'addressId', 'chainId', 'getInteractions', and 'queryType'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
118:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
166:6 Warning: React Hook useEffect has a missing dependency: 'searchRef'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
287:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/red-flag.tsx
49:6 Warning: React Hook useEffect has missing dependencies: 'addressId', 'appCtx', 'chainId', and 'getRedFlagsFromAddress'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
59:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
133:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/reviews.tsx
48:6 Warning: React Hook useEffect has missing dependencies: 'addressId', 'appCtx', 'chainId', and 'getReviews'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
58:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
125:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/index.tsx
51:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'blockId', 'chainId', and 'getBlockDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
61:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
152:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/transactions.tsx
53:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'blockId', 'chainId', and 'getTransactionList'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
63:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
132:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/contract/[contractId].tsx
56:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', 'contractId', and 'getContractDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
70:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
199:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/evidence/[evidenceId].tsx
53:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', 'evidenceId', and 'getEvidenceDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
67:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/pages/app/chains/[chainId]/index.tsx
71:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', 'getBlockData', 'getChainDetail', and 'getTransactionData'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
88:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/pages/app/chains/[chainId]/transaction/[transactionId].tsx
55:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', 'getTransactionDetail', and 'transactionId'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
65:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
172:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transactions.tsx
56:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', and 'getInteractionTransaction'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
66:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
161:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/index.tsx
20:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/currencies/[currencyId]/index.tsx
48:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'currencyId', and 'getCurrencyDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
58:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
148:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/red-flag.tsx
56:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'currencyId', and 'getRedFlagsFromCurrency'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
66:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
136:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/index.tsx
20:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/index.tsx
20:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/red-flag/[redFlagId].tsx
53:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'getRedFlagDetail', and 'redFlagId'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
69:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
183:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/red-flag/index.tsx
38:6 Warning: React Hook useEffect has missing dependencies: 'appCtx' and 'getAllRedFlags'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
52:6 Warning: React Hook useEffect has a missing dependency: 'timer'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/searching-result.tsx
29:6 Warning: React Hook useEffect has a missing dependency: 'appCtx'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
73:6 Warning: React Hook useEffect has missing dependencies: 'getSearchResult' and 'searchTextRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
114:6 Warning: React Hook useEffect has missing dependencies: 'filterTabs', 'searchTextRef', and 'sortingOptions'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/reports/[projectId]/balance.tsx
75:6 Warning: React Hook useEffect has missing dependencies: 'endDateStr.date', 'getBalanceSheet', and 'startDateStr.date'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/reports/[projectId]/cash-flow.tsx
82:6 Warning: React Hook useEffect has missing dependencies: 'endDateStr.date', 'endDateStr.dateOfLastYear', 'getStatementsOfCashFlow', and 'startDateStr.date'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/reports/[projectId]/comprehensive-income.tsx
81:6 Warning: React Hook useEffect has missing dependencies: 'endDateStr.date', 'endDateStr.dateOfLastYear', 'getComprehensiveIncomeStatements', and 'startDateStr.date'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

- info Linting and checking validity of types .%

扣除：

./src/components/block_tab/block_tab.tsx
26:9 Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
60:6 Warning: React Hook useEffect has missing dependencies: 'blockList' and 'searchRef'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/transaction_tab/transaction_tab.tsx
26:9  Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.  react-hooks/rules-of-hooks
61:6  Warning: React Hook useEffect has missing dependencies: 'searchRef' and 'transactionList'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

Warning 總計: 83 - 2 = 81

React Hook useEffect中的依賴項未完整指定

React Hook useEffect has missing dependencies / React Hook useEffect has a missing dependency

這類警告共計 42 個

solve: ✅

因為這裡 useEffect 程式碼片段的目標是僅在初始渲染時執行一次，並且我們不在意某些變數的變化（那些 ESLint 希望我們加入依賴陣列的變數），也就是我們不想要因爲這些變數們的改變而讓 useEffect 重新運行，因此這裡放空的依賴陣列是合理的。

所以使用行內註解的方式來暫時關閉 eslint 規則中的 react-hooks/exhaustive-deps 警告。

// eslint-disable-next-line react-hooks/exhaustive-deps

之後會再找是否有更好的方式處理這種情況的 useEffect。

範例:

useEffect(() => {
  getBalanceSheet(startDateStr.date).then(data => setStartBalanceData(data));
  getBalanceSheet(endDateStr.date).then(data => setEndBalanceData(data));
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

0126

npm run build

🟡 Warning: 52 / Error: 0

> npm run build

> baifa@0.1.0 build
> next build

- info Loaded env from /Users/liz/Desktop/BAIFA/.env

./src/components/address_detail/address_detail.tsx
41:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
69:9 Warning: 'displayRelatedAddress' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/components/blacklist_item/blacklist_item.tsx
29:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/components/block_tab/block_tab.tsx
47:6 Warning: React Hook useEffect has missing dependencies: 'blockData.length' and 'getBlockData'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
52:6 Warning: React Hook useEffect has a missing dependency: 'getBlockData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
56:6 Warning: React Hook useEffect has a missing dependency: 'getBlockData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
81:6 Warning: React Hook useEffect has a missing dependency: 'searchRef'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/date_picker/date_picker.tsx
177:6 Warning: React Hook useEffect has a missing dependency: 'setFilteredPeriod'. Either include it or remove the dependency array. If 'setFilteredPeriod' changes too often, find the parent component that defines it and wrap that definition in useCallback. react-hooks/exhaustive-deps
238:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps
248:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/landing_page_body/landing_page_body.tsx
33:30 Warning: The ref value 'scrl.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'scrl.current' to a variable inside the effect, and use that variable in the cleanup function. react-hooks/exhaustive-deps

./src/components/transaction_tab/transaction_tab.tsx
27:29 Warning: 'searchRef' is assigned a value but never used. @typescript-eslint/no-unused-vars
47:6 Warning: React Hook useEffect has missing dependencies: 'getTransactionData' and 'transactionData.length'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
52:6 Warning: React Hook useEffect has a missing dependency: 'getTransactionData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
56:6 Warning: React Hook useEffect has a missing dependency: 'getTransactionData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/contexts/app_context.tsx
21:10 Warning: 'isInit' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/contexts/market_context.tsx
90:10 Warning: 'promotion' is assigned a value but never used. @typescript-eslint/no-unused-vars
91:10 Warning: 'chainList' is assigned a value but never used. @typescript-eslint/no-unused-vars
92:10 Warning: 'currencyList' is assigned a value but never used. @typescript-eslint/no-unused-vars
93:10 Warning: 'blacklist' is assigned a value but never used. @typescript-eslint/no-unused-vars
119:6 Warning: React Hook useCallback has a missing dependency: 'setChainList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
132:6 Warning: React Hook useCallback has a missing dependency: 'setCurrencyList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
145:6 Warning: React Hook useCallback has a missing dependency: 'setBlacklist'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
152:6 Warning: React Hook useCallback has missing dependencies: 'getBlacklist', 'getChains', 'getCurrencies', and 'getPromotion'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/lib/hooks/use_outer_click.ts
5:10 Warning: 'componentVisible' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/index.tsx
87:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
287:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/interaction.tsx
120:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
290:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/red-flag.tsx
60:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
134:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/reviews.tsx
59:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
126:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/index.tsx
51:6 Warning: React Hook useEffect has missing dependencies: 'appCtx' and 'getBlockDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
61:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
152:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/transactions.tsx
64:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
133:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/contract/[contractId].tsx
71:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
200:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/evidence/[evidenceId].tsx
68:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps

./src/pages/app/chains/[chainId]/index.tsx
47:6 Warning: React Hook useEffect has missing dependencies: 'appCtx', 'chainId', and 'getChainDetail'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/app/chains/[chainId]/transaction/[transactionId].tsx
65:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
172:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transactions.tsx
67:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
162:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/index.tsx
59:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
149:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/red-flag.tsx
67:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
137:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/red-flag/[redFlagId].tsx
70:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps
184:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (90/90)
- info Finalizing page optimization

Route (pages) Size First Load JS
┌ ● / 3.93 kB 110 kB
├ /\_app 0 B 97 kB
├ ○ /404 2.51 kB 108 kB
├ λ /api/email 0 B 97 kB
├ λ /api/hello 0 B 97 kB
├ λ /api/v1/app 0 B 97 kB
├ λ /api/v1/app/blacklist 0 B 97 kB
├ λ /api/v1/app/chains 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/interactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/red_flags 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/reviews 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id]/transactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/contracts/[contract_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/evidence/[evidence_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions/[transaction_id] 0 B 97 kB
├ λ /api/v1/app/currencies 0 B 97 kB
├ λ /api/v1/app/currencies/[currency_id] 0 B 97 kB
├ λ /api/v1/app/currencies/[currency_id]/red_flags 0 B 97 kB
├ λ /api/v1/app/red_flags 0 B 97 kB
├ λ /api/v1/app/red_flags/[red_flag_id] 0 B 97 kB
├ λ /api/v1/app/search 0 B 97 kB
├ λ /api/v1/app/suggestions 0 B 97 kB
├ ● /app 3.66 kB 108 kB
├ ● /app/blacklist 2.99 kB 111 kB
├ ● /app/chains 4.3 kB 108 kB
├ ● /app/chains/[chainId] 3.3 kB 115 kB
├ ├ /tw/app/chains/eth
├ ├ /en/app/chains/eth
├ ├ /cn/app/chains/eth
├ └ [+12 more paths]
├ ● /app/chains/[chainId]/address/[addressId] 5.81 kB 118 kB
├ └ /en/app/chains/isun/address/1
├ ● /app/chains/[chainId]/address/[addressId]/interaction 2.6 kB 114 kB
├ └ /en/app/chains/isun/address/1/interaction
├ ● /app/chains/[chainId]/address/[addressId]/red-flag 2.47 kB 114 kB
├ └ /en/app/chains/isun/address/1/red-flag
├ ● /app/chains/[chainId]/address/[addressId]/reviews 2.33 kB 110 kB
├ └ /en/app/chains/isun/address/1/reviews
├ ● /app/chains/[chainId]/block/[blockId] 5.49 kB 111 kB
├ └ /en/app/chains/isun/block/1
├ ● /app/chains/[chainId]/block/[blockId]/transactions 2.62 kB 114 kB
├ └ /en/app/chains/isun/block/1/transactions
├ ● /app/chains/[chainId]/contract/[contractId] 4.65 kB 114 kB
├ └ /en/app/chains/isun/contract/1
├ ● /app/chains/[chainId]/evidence/[evidenceId] 4.74 kB 114 kB
├ ├ /tw/app/chains/isun/evidence/530029
├ ├ /en/app/chains/isun/evidence/530029
├ ├ /cn/app/chains/isun/evidence/530029
├ └ [+21 more paths]
├ ● /app/chains/[chainId]/transaction/[transactionId] 5.99 kB 111 kB
├ └ /en/app/chains/isun/transaction/1
├ ● /app/chains/[chainId]/transactions 2.75 kB 115 kB
├ └ /en/app/chains/isun/transactions
├ ● /app/currencies 2.96 kB 111 kB
├ ● /app/currencies/[currencyId] 4.81 kB 114 kB
├ └ /en/app/currencies/isun
├ ● /app/currencies/[currencyId]/red-flag 2.48 kB 114 kB
├ └ /en/app/currencies/isun/red-flag
├ ● /app/red-flag 2.29 kB 114 kB
├ ● /app/red-flag/[redFlagId] 4.25 kB 113 kB
├ └ /tw/app/red-flag/1
├ ● /app/searching-result 3.48 kB 115 kB
├ ● /coming-soon 2.6 kB 108 kB
├ ● /contact-us 3.78 kB 109 kB
├ ● /reports/[projectId]/balance 7.64 kB 111 kB
├ └ /tw/reports/1/balance
├ ● /reports/[projectId]/cash-flow 11 kB 115 kB
├ └ /tw/reports/1/cash-flow
├ ● /reports/[projectId]/comprehensive-income 8.84 kB 112 kB
├ └ /tw/reports/1/comprehensive-income
├ ● /reports/[projectId]/plugin 3.37 kB 108 kB
├ └ /tw/reports/1/plugin
└ ● /reports/[projectId]/red-flags 1.99 kB 106 kB
└ /tw/reports/1/red-flags

- First Load JS shared by all 105 kB
  ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB
  ├ chunks/main-0a14fc73d5f25edd.js 28.4 kB
  ├ chunks/pages/\_app-fcf42dceff612693.js 22.6 kB
  ├ chunks/webpack-ee7e63bc15b31913.js 818 B
  └ css/b98998b9ee236846.css 7.69 kB

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)

React Hook useEffect中的依賴項未完整指定

React Hook useEffect has missing dependencies / React Hook useEffect has a missing dependency

這類警告共計 10 個

因為解衝突的關係，有些我昨天已做的改動有被我取消掉，所以今天要補回。

Solve: ✅

使用行內註解的方式來暫時關閉 eslint 規則中的 react-hooks/exhaustive-deps 警告。

// eslint-disable-next-line react-hooks/exhaustive-deps

🟡 Warning: 42 / Error: 0

React Hook useEffect 中的 'timer' 變數警告

這類警告共計 15 個

錯誤訊息像是:

41:13 Warning: Assignments to the 'timer' variable from inside React Hook useEffect will be lost after each render. 
To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. 
react-hooks/exhaustive-deps

錯誤程式碼範例: ./src/components/address_detail/address_detail.tsx

let timer: NodeJS.Timeout;

useEffect(() => {
  clearTimeout(timer);

  // Info: (20231017 - Julian) 算出 latestActiveTime 距離現在過了多少時間
  timer = setTimeout(() => {
    const now = Math.ceil(Date.now() / 1000);
    const timeSpan = now - latestActiveTime;
    setSinceTime(timeSpan);
  }, 1000);

  return () => clearTimeout(timer);
}, [sinceTime]);

Solve:

1. 改用 `useRef` 儲存 'timer' variable

const timerRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
  // Info: (20231017 - Julian) 算出 latestActiveTime 距離現在過了多少時間
  timerRef.current = setTimeout(() => {
    const now = Math.ceil(Date.now() / 1000);
    const timeSpan = now - latestActiveTime;
    setSinceTime(timeSpan);
  }, 1000);

  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, [latestActiveTime, sinceTime]);

2. 刪除第一個 `clearTimeout(timer);`

當狀態改變 → 造成元件重新渲染 → 渲染完成 → 檢查 useEffect 並處理副作用。

檢查方式就是看各個 useEffect 的依賴項有沒有被改變過（依賴項：依賴陣列內的值）有的話就會執行 callback function（也就是 effect），但是執行 effect 前會先執行 return function。

所以第一個 clearTimeout(timer); 可以刪除，因為在 return function 的部分已經清除計時器：

return () => {
  if (timerRef.current) {
    clearTimeout(timerRef.current);
  }
};

結論 - 更新程式碼為：

const timerRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
  // Info: (20231017 - Julian) 算出 latestActiveTime 距離現在過了多少時間
  timerRef.current = setTimeout(() => {
    const now = Math.ceil(Date.now() / 1000);
    const timeSpan = now - latestActiveTime;
    setSinceTime(timeSpan);
  }, 1000);

  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, [latestActiveTime, sinceTime]);

測試結果

https://github.com/CAFECA-IO/BAIFA/assets/105651918/f54c52f1-5097-465a-b722-032967d64db6

0126 - 18:00 測試

npm run build

Terminal - Warning messages:

> npm run build

> baifa@0.1.0 build
> next build

- info Loaded env from /Users/liz/Desktop/BAIFA/.env

./src/components/address_detail/address_detail.tsx
71:9 Warning: 'displayRelatedAddress' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/components/date_picker/date_picker.tsx
239:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps
249:5 Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/landing_page_body/landing_page_body.tsx
33:30 Warning: The ref value 'scrl.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'scrl.current' to a variable inside the effect, and use that variable in the cleanup function. react-hooks/exhaustive-deps

./src/components/transaction_tab/transaction_tab.tsx
27:29 Warning: 'searchRef' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/contexts/app_context.tsx
21:10 Warning: 'isInit' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/contexts/market_context.tsx
90:10 Warning: 'promotion' is assigned a value but never used. @typescript-eslint/no-unused-vars
91:10 Warning: 'chainList' is assigned a value but never used. @typescript-eslint/no-unused-vars
92:10 Warning: 'currencyList' is assigned a value but never used. @typescript-eslint/no-unused-vars
93:10 Warning: 'blacklist' is assigned a value but never used. @typescript-eslint/no-unused-vars
119:6 Warning: React Hook useCallback has a missing dependency: 'setChainList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
132:6 Warning: React Hook useCallback has a missing dependency: 'setCurrencyList'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
145:6 Warning: React Hook useCallback has a missing dependency: 'setBlacklist'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
152:6 Warning: React Hook useCallback has missing dependencies: 'getBlacklist', 'getChains', 'getCurrencies', and 'getPromotion'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/lib/hooks/use_outer_click.ts
5:10 Warning: 'componentVisible' is assigned a value but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/index.tsx
290:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/interaction.tsx
292:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/red-flag.tsx
136:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/reviews.tsx
128:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/index.tsx
155:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/transactions.tsx
135:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/contract/[contractId].tsx
202:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transaction/[transactionId].tsx
174:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transactions.tsx
164:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/index.tsx
151:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/red-flag.tsx
139:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/red-flag/[redFlagId].tsx
186:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (90/90)
- info Finalizing page optimization

Route (pages) Size First Load JS
┌ ● / 3.93 kB 110 kB
├ /\_app 0 B 97 kB
├ ○ /404 2.51 kB 108 kB
├ λ /api/email 0 B 97 kB
├ λ /api/hello 0 B 97 kB
├ λ /api/v1/app 0 B 97 kB
├ λ /api/v1/app/blacklist 0 B 97 kB
├ λ /api/v1/app/chains 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/interactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/red_flags 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/reviews 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id]/transactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/contracts/[contract_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/evidence/[evidence_id] 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions 0 B 97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions/[transaction_id] 0 B 97 kB
├ λ /api/v1/app/currencies 0 B 97 kB
├ λ /api/v1/app/currencies/[currency_id] 0 B 97 kB
├ λ /api/v1/app/currencies/[currency_id]/red_flags 0 B 97 kB
├ λ /api/v1/app/red_flags 0 B 97 kB
├ λ /api/v1/app/red_flags/[red_flag_id] 0 B 97 kB
├ λ /api/v1/app/search 0 B 97 kB
├ λ /api/v1/app/suggestions 0 B 97 kB
├ ● /app 3.66 kB 108 kB
├ ● /app/blacklist 3 kB 111 kB
├ ● /app/chains 4.3 kB 108 kB
├ ● /app/chains/[chainId] 3.3 kB 115 kB
├ ├ /tw/app/chains/eth
├ ├ /en/app/chains/eth
├ ├ /cn/app/chains/eth
├ └ [+12 more paths]
├ ● /app/chains/[chainId]/address/[addressId] 5.83 kB 118 kB
├ └ /en/app/chains/isun/address/1
├ ● /app/chains/[chainId]/address/[addressId]/interaction 2.62 kB 114 kB
├ └ /en/app/chains/isun/address/1/interaction
├ ● /app/chains/[chainId]/address/[addressId]/red-flag 2.49 kB 114 kB
├ └ /en/app/chains/isun/address/1/red-flag
├ ● /app/chains/[chainId]/address/[addressId]/reviews 2.35 kB 110 kB
├ └ /en/app/chains/isun/address/1/reviews
├ ● /app/chains/[chainId]/block/[blockId] 5.49 kB 111 kB
├ └ /en/app/chains/isun/block/1
├ ● /app/chains/[chainId]/block/[blockId]/transactions 2.63 kB 114 kB
├ └ /en/app/chains/isun/block/1/transactions
├ ● /app/chains/[chainId]/contract/[contractId] 4.66 kB 114 kB
├ └ /en/app/chains/isun/contract/1
├ ● /app/chains/[chainId]/evidence/[evidenceId] (420 ms) 4.75 kB 114 kB
├ ├ /tw/app/chains/isun/evidence/530029
├ ├ /en/app/chains/isun/evidence/530029
├ ├ /cn/app/chains/isun/evidence/530029
├ └ [+21 more paths]
├ ● /app/chains/[chainId]/transaction/[transactionId] 6 kB 111 kB
├ └ /en/app/chains/isun/transaction/1
├ ● /app/chains/[chainId]/transactions 2.76 kB 115 kB
├ └ /en/app/chains/isun/transactions
├ ● /app/currencies 2.96 kB 111 kB
├ ● /app/currencies/[currencyId] 4.82 kB 114 kB
├ └ /en/app/currencies/isun
├ ● /app/currencies/[currencyId]/red-flag 2.48 kB 114 kB
├ └ /en/app/currencies/isun/red-flag
├ ● /app/red-flag 2.29 kB 114 kB
├ ● /app/red-flag/[redFlagId] 4.25 kB 113 kB
├ └ /tw/app/red-flag/1
├ ● /app/searching-result 3.48 kB 115 kB
├ ● /coming-soon 2.6 kB 108 kB
├ ● /contact-us 3.78 kB 109 kB
├ ● /reports/[projectId]/balance 7.64 kB 111 kB
├ └ /tw/reports/1/balance
├ ● /reports/[projectId]/cash-flow 11 kB 115 kB
├ └ /tw/reports/1/cash-flow
├ ● /reports/[projectId]/comprehensive-income 8.84 kB 112 kB
├ └ /tw/reports/1/comprehensive-income
├ ● /reports/[projectId]/plugin 3.37 kB 108 kB
├ └ /tw/reports/1/plugin
└ ● /reports/[projectId]/red-flags 1.99 kB 106 kB
└ /tw/reports/1/red-flags

- First Load JS shared by all 105 kB
  ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB
  ├ chunks/main-0a14fc73d5f25edd.js 28.4 kB
  ├ chunks/pages/\_app-fcf42dceff612693.js 22.6 kB
  ├ chunks/webpack-ee7e63bc15b31913.js 818 B
  └ css/b98998b9ee236846.css 7.69 kB

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)

0125: took 8 hours 0126: took 8 hours

Warning remain: 27 total: 83

剩餘: 32.5 % 完成: 67.5 %

0129

npm run build

🟡 Warning: 27 / Error: 0

> npm run build

> baifa@0.1.0 build
> next build

- info Loaded env from /Users/liz/Desktop/BAIFA/.env

./src/components/address_detail/address_detail.tsx
71:9  Warning: 'displayRelatedAddress' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/components/date_picker/date_picker.tsx
239:5  Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array.  react-hooks/exhaustive-deps
249:5  Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/landing_page_body/landing_page_body.tsx
33:30  Warning: The ref value 'scrl.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'scrl.current' to a variable inside the effect, and use that variable in the cleanup function.  react-hooks/exhaustive-deps

./src/components/transaction_tab/transaction_tab.tsx
27:29  Warning: 'searchRef' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/contexts/app_context.tsx
21:10  Warning: 'isInit' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/contexts/market_context.tsx
90:10  Warning: 'promotion' is assigned a value but never used.  @typescript-eslint/no-unused-vars
91:10  Warning: 'chainList' is assigned a value but never used.  @typescript-eslint/no-unused-vars
92:10  Warning: 'currencyList' is assigned a value but never used.  @typescript-eslint/no-unused-vars
93:10  Warning: 'blacklist' is assigned a value but never used.  @typescript-eslint/no-unused-vars
119:6  Warning: React Hook useCallback has a missing dependency: 'setChainList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
132:6  Warning: React Hook useCallback has a missing dependency: 'setCurrencyList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
145:6  Warning: React Hook useCallback has a missing dependency: 'setBlacklist'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
152:6  Warning: React Hook useCallback has missing dependencies: 'getBlacklist', 'getChains', 'getCurrencies', and 'getPromotion'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./src/lib/hooks/use_outer_click.ts
5:10  Warning: 'componentVisible' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/index.tsx
290:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/interaction.tsx
292:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/red-flag.tsx
136:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/reviews.tsx
128:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/index.tsx
155:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/transactions.tsx
135:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/contract/[contractId].tsx
202:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transaction/[transactionId].tsx
174:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transactions.tsx
164:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/index.tsx
151:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/red-flag.tsx
139:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

./src/pages/app/red-flag/[redFlagId].tsx
186:55  Warning: 'locales' is defined but never used.  @typescript-eslint/no-unused-vars

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types  
- info Creating an optimized production build  
- info Compiled successfully
- info Collecting page data  
- info Generating static pages (90/90)
- info Finalizing page optimization  

Route (pages)                                                           Size     First Load JS
┌ ● /                                                                   3.93 kB         110 kB
├   /_app                                                               0 B              97 kB
├ ○ /404                                                                2.51 kB         108 kB
├ λ /api/email                                                          0 B              97 kB
├ λ /api/hello                                                          0 B              97 kB
├ λ /api/v1/app                                                         0 B              97 kB
├ λ /api/v1/app/blacklist                                               0 B              97 kB
├ λ /api/v1/app/chains                                                  0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]                                      0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]               0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/interactions  0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/red_flags     0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/addresses/[address_id]/reviews       0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/block                                0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id]                     0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/block/[block_id]/transactions        0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/contracts/[contract_id]              0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/evidence/[evidence_id]               0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions                         0 B              97 kB
├ λ /api/v1/app/chains/[chains_id]/transactions/[transaction_id]        0 B              97 kB
├ λ /api/v1/app/currencies                                              0 B              97 kB
├ λ /api/v1/app/currencies/[currency_id]                                0 B              97 kB
├ λ /api/v1/app/currencies/[currency_id]/red_flags                      0 B              97 kB
├ λ /api/v1/app/red_flags                                               0 B              97 kB
├ λ /api/v1/app/red_flags/[red_flag_id]                                 0 B              97 kB
├ λ /api/v1/app/search                                                  0 B              97 kB
├ λ /api/v1/app/suggestions                                             0 B              97 kB
├ ● /app                                                                3.66 kB         108 kB
├ ● /app/blacklist                                                      3 kB            111 kB
├ ● /app/chains                                                         4.3 kB          108 kB
├ ● /app/chains/[chainId]                                               3.3 kB          115 kB
├   ├ /tw/app/chains/eth
├   ├ /en/app/chains/eth
├   ├ /cn/app/chains/eth
├   └ [+12 more paths]
├ ● /app/chains/[chainId]/address/[addressId]                           5.83 kB         118 kB
├   └ /en/app/chains/isun/address/1
├ ● /app/chains/[chainId]/address/[addressId]/interaction               2.62 kB         114 kB
├   └ /en/app/chains/isun/address/1/interaction
├ ● /app/chains/[chainId]/address/[addressId]/red-flag                  2.49 kB         114 kB
├   └ /en/app/chains/isun/address/1/red-flag
├ ● /app/chains/[chainId]/address/[addressId]/reviews                   2.35 kB         110 kB
├   └ /en/app/chains/isun/address/1/reviews
├ ● /app/chains/[chainId]/block/[blockId]                               5.49 kB         111 kB
├   └ /en/app/chains/isun/block/1
├ ● /app/chains/[chainId]/block/[blockId]/transactions                  2.63 kB         114 kB
├   └ /en/app/chains/isun/block/1/transactions
├ ● /app/chains/[chainId]/contract/[contractId]                         4.66 kB         114 kB
├   └ /en/app/chains/isun/contract/1
├ ● /app/chains/[chainId]/evidence/[evidenceId]                         4.75 kB         114 kB
├   ├ /tw/app/chains/isun/evidence/530029
├   ├ /en/app/chains/isun/evidence/530029
├   ├ /cn/app/chains/isun/evidence/530029
├   └ [+21 more paths]
├ ● /app/chains/[chainId]/transaction/[transactionId]                   6 kB            111 kB
├   └ /en/app/chains/isun/transaction/1
├ ● /app/chains/[chainId]/transactions                                  2.76 kB         115 kB
├   └ /en/app/chains/isun/transactions
├ ● /app/currencies                                                     2.96 kB         111 kB
├ ● /app/currencies/[currencyId]                                        4.82 kB         114 kB
├   └ /en/app/currencies/isun
├ ● /app/currencies/[currencyId]/red-flag                               2.48 kB         114 kB
├   └ /en/app/currencies/isun/red-flag
├ ● /app/red-flag                                                       2.29 kB         114 kB
├ ● /app/red-flag/[redFlagId]                                           4.25 kB         113 kB
├   └ /tw/app/red-flag/1
├ ● /app/searching-result                                               3.48 kB         115 kB
├ ● /coming-soon                                                        2.6 kB          108 kB
├ ● /contact-us                                                         3.78 kB         109 kB
├ ● /reports/[projectId]/balance                                        7.64 kB         111 kB
├   └ /tw/reports/1/balance
├ ● /reports/[projectId]/cash-flow                                      11 kB           115 kB
├   └ /tw/reports/1/cash-flow
├ ● /reports/[projectId]/comprehensive-income                           8.84 kB         112 kB
├   └ /tw/reports/1/comprehensive-income
├ ● /reports/[projectId]/plugin                                         3.37 kB         108 kB
├   └ /tw/reports/1/plugin
└ ● /reports/[projectId]/red-flags                                      1.99 kB         106 kB
    └ /tw/reports/1/red-flags
+ First Load JS shared by all                                           105 kB
  ├ chunks/framework-2c79e2a64abdb08b.js                                45.2 kB
  ├ chunks/main-0a14fc73d5f25edd.js                                     28.4 kB
  ├ chunks/pages/_app-fcf42dceff612693.js                               22.6 kB
  ├ chunks/webpack-ee7e63bc15b31913.js                                  818 B
  └ css/b98998b9ee236846.css                                            7.69 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

React `useCallback` hook 依賴陣列包含不必要的依賴項，或者有缺少的依賴項

Warning: React Hook useCallback has unnecessary dependencies / Warning: React Hook useCallback has a missing dependency

這類警告共有 6 個

1. 不必要的依賴項 - 錯誤訊息範例：

./src/components/date_picker/date_picker.tsx

239:5  Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array.  react-hooks/exhaustive-deps
249:5  Warning: React Hook useCallback has unnecessary dependencies: 'dateOne', 'dateTwo', 'maxDate', 'selectedMonth', and 'selectedYear'. Either exclude them or remove the dependency array.  react-hooks/exhaustive-deps

程式碼：

const selectDateOne = useCallback(
  (el: Dates | null) => {
    if (!el) return setDateOne(null);
    let newDate = new Date(el.time);
    newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`);
    setDateOne(newDate);
  },
  [maxDate, selectedMonth, selectedYear, dateOne, dateTwo]
);

const selectDateTwo = useCallback(
  (el: Dates | null) => {
    if (!el) return setDateTwo(null);
    let newDate = new Date(el.time);
    newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`);
    setDateTwo(newDate);
  },
  [maxDate, selectedMonth, selectedYear, dateOne, dateTwo]
);

Solve:

依照警告訊息提示，刪除多餘的依賴項：

const selectDateOne = useCallback((el: Dates | null) => {
  if (!el) return setDateOne(null);
  let newDate = new Date(el.time);
  newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`);
  setDateOne(newDate);
}, []);

const selectDateTwo = useCallback((el: Dates | null) => {
  if (!el) return setDateTwo(null);
  let newDate = new Date(el.time);
  newDate = new Date(`${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`);
  setDateTwo(newDate);
}, []);

2. 有缺少的依賴項 - 錯誤訊息範例：

./src/contexts/market_context.tsx

119:6  Warning: React Hook useCallback has a missing dependency: 'setChainList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

程式碼：

const getChains = useCallback(async () => {
  let data: IChain[] = [];
  try {
    const response = await fetch(`${APIURL.CHAINS}`, {
      method: 'GET',
    });
    data = await response.json();
  } catch (error) {
    //console.log('getChains error', error);
  }
  setChainList(data);
}, []);

Solve:

依照警告訊息提示，補足多餘的依賴項：

const getChains = useCallback(async () => {
  let data: IChain[] = [];
  try {
    const response = await fetch(`${APIURL.CHAINS}`, {
      method: 'GET',
    });
    data = await response.json();
  } catch (error) {
    //console.log('getChains error', error);
  }
  setChainList(data);
}, [setChainList]);

Problem

遇到有些補足的依賴項是函數，會產生另一個問題就是：

更改前:

const init = useCallback(async () => {
  await getPromotion();
  await getChains();
  await getCurrencies();
  await getBlacklist();
}, []);

更改後:

const init = useCallback(async () => {
  await getPromotion();
  await getChains();
  await getCurrencies();
  await getBlacklist();
}, [getBlacklist, getChains, getCurrencies, getPromotion]);

產生的新問題:

出問題的程式碼:

const getPromotion = async () => {
  let data: IPromotion = defaultPromotion;
  try {
    const response = await fetch(`${APIURL.PROMOTION}`, {
      method: 'GET',
    });
    data = await response.json();
  } catch (error) {
    //console.log('getPromotion error', error);
  }
  setPromotion(data);
};

問題:

The 'getPromotion' function makes the dependencies of useCallback Hook (at line 152) change on every render. Move it inside the useCallback callback. Alternatively, wrap the definition of 'getPromotion' in its own useCallback() Hook.
eslint[react-hooks/exhaustive-deps](https://github.com/facebook/react/issues/14920)

Solve:

eslint 提示建議將 getPromotion 函數移到 useCallback 的回調函數內部，或者將 getPromotion 的定義包裝在自己的 useCallback hook 內。

可能會改成下方兩種：（我還沒確定這樣是否可行）

第一種：

const init = useCallback(async () => {
  const getPromotion = async () => {
    let data: IPromotion = defaultPromotion;
    try {
      const response = await fetch(`${APIURL.PROMOTION}`, {
        method: 'GET',
      });
      data = await response.json();
    } catch (error) {
      //console.log('getPromotion error', error);
    }
    setPromotion(data);
  };
  await getPromotion();
  await getChains();
  await getCurrencies();
  await getBlacklist();
}, [getBlacklist, getChains, getCurrencies, setPromotion]);

第二種：

const getPromotion = useCallback(async () => {
  let data: IPromotion = defaultPromotion;
  try {
    const response = await fetch(`${APIURL.PROMOTION}`, {
      method: 'GET',
    });
    data = await response.json();
  } catch (error) {
    //console.log('getPromotion error', error);
  }
  setPromotion(data);
}, [setPromotion]);

0129

took 8 hours

Warning remain: 21 Warning total: 83

補充 : if schema.prisma updated

Reference : Prisma Development and production

Development environments

In a development environment, use the migrate dev command to generate and apply migrations:

npx prisma migrate dev

Create and apply migrations

migrate dev is a development command and should never be used in a production environment.

This command:

Reruns the existing migration history in the shadow database in order to detect schema drift (edited or deleted migration file, or a manual changes to the database schema)
Applies pending migrations to the shadow database (for example, new migrations created by colleagues)
If it detects changes to the Prisma schema, it generates a new migration from these changes
Applies all unapplied migrations to the development database and updates the _prisma_migrations table
Triggers the generation of artifacts (for example, Prisma Client)

The migrate dev command will prompt you to reset the database in the following scenarios:

Migration history conflicts caused by modified or missing migrations
The database schema has drifted away from the end-state of the migration history

useStateRef 第一個狀態值沒有使用

./src/contexts/market_context.tsx
90:10 Warning: 'promotion' is assigned a value but never used. @typescript-eslint/no-unused-vars
91:10 Warning: 'chainList' is assigned a value but never used. @typescript-eslint/no-unused-vars
92:10 Warning: 'currencyList' is assigned a value but never used. @typescript-eslint/no-unused-vars
93:10 Warning: 'blacklist' is assigned a value but never used. @typescript-eslint/no-unused-vars

程式碼

const [promotion, setPromotion, promotionRef] = useStateRef<IPromotion>(defaultPromotion);
const [chainList, setChainList, chainListRef] = useStateRef<IChain[]>([]);
const [currencyList, setCurrencyList, currencyListRef] = useStateRef<ICurrency[]>([]);
const [blacklist, setBlacklist, blacklistRef] = useStateRef<IBlacklist[]>([]);

const defaultValues = {
  init,
  promotionData: promotionRef.current,
  chainList: chainListRef.current,
  currencyList: currencyListRef.current,
  blacklist: blacklistRef.current,
// ...
};

改用 useState

const [promotion, setPromotion] = useState<IPromotion>(defaultPromotion);
const [chainList, setChainList] = useState<IChain[]>([]);
const [currencyList, setCurrencyList] = useState<ICurrency[]>([]);
const [blacklist, setBlacklist] = useState<IBlacklist[]>([]);

const defaultValues = {
  init,
  promotionData: promotion,
  chainList: chainList,
  currencyList: currencyList,
  blacklist: blacklist,
// ...
};

理由

state 要存什麼資料和 ref 要存什麼資料，這兩個差異在 :

state 存的狀態是跟畫面有關，所以 react 的機制就是 state 改變會觸發 re-render
ref 存的資料是跟畫面無關，例如偷偷在背景執行一個計時器之類的，所以 react 設計他不會觸發 re-render

參考資料＆延伸閱讀

https://ithelp.ithome.com.tw/articles/10265078

useStateRef

useStateRef 是一個套件 https://www.npmjs.com/package/react-usestateref

是將 state 結合 ref，馬上就取得更新後的 state 值。

這個套件的出現是因為想要解決「無法 get the current state」的問題，react-useStateRef npm 自我介紹:

在 React 中，當函數訪問狀態時，它們接收的是函數定義時的狀態，而不是當前的狀態。因此，如果狀態發生變化，你的函數和效果可能使用舊的狀態。使用 useRef 可以解決這個問題，因為它始終只有一個值。但是，當你更新 Ref 時，它不會觸發重新渲染。為了解決這個問題，我創造了一個新的 hook 叫做 useStateRef。

更詳細的原因是:

由於 react 有 state batch update 的特性，也就是在多次觸發同步事件去更新 state 時，會合併成一次的更新，元件只會重新渲染一次，減少了不必要的渲染。根據此點特性，state 是透過 batching 去更新值，因此設定新的值給 state 後，馬上 console 印出來的值還是更新前的值。 - 出處

useStateRef 自定義的 hook 設計可能長這樣（可能啦）:

import { useState, useRef } from 'react';

function useStateRef(initialValue) {
  const [state, setState] = useState(initialValue);
  const stateRef = useRef(state);

  const setStateRef = (newValue) => {
    setState(newValue);
    stateRef.current = newValue;
  };

  return [state, setStateRef, stateRef];
}

export default useStateRef;

結論

那因為這裡沒有需要非常即時拿到最新狀態的需求，而且第一個狀態值也沒有使用到，導致 @typescript-eslint/no-unused-vars 會報錯(Warning)，因此先改成使用 useState

關於 ref.current 放在 cleanup 函數的警告

警告訊息

./src/components/landing_page_body/landing_page_body.tsx

33:30 Warning: The ref value 'scrl.current' will likely have changed by the time this effect cleanup function runs. 
If this ref points to a node rendered by React, copy 'scrl.current' to a variable inside the effect, and use that variable in the cleanup function. 
react-hooks/exhaustive-deps

這個警告是說，在 useEffect 的 cleanup 函數中，scrl.current 的值在該函數執行時可能已經發生了變化。為了避免這個問題，建議將 scrl.current 的值保存到 useEffect 內部的變數中，然後在 cleanup 函數中使用該變數。

程式碼:

useEffect(() => {
  if (!!!scrl.current) return;
  /* Info:(20230815 - Julian) 設定監聽事件，將捲軸位置更新到 scrollLeft */
  const scrollLeft = scrl.current.scrollLeft;
  const onScroll = () => setScrollLeft(scrollLeft);
  scrl.current.addEventListener('scroll', onScroll);

  return () => {
    if (scrl.current) scrl.current.removeEventListener('scroll', onScroll);
  };
}, [scrollLeft]);

修改:

useEffect(() => {
  if (!!!scrl.current) return;
  /* Info:(20230815 - Julian) 設定監聽事件，將捲軸位置更新到 scrollLeft */
  const scrollLeft = scrl.current.scrollLeft;
  const onScroll = () => setScrollLeft(scrollLeft);
  scrl.current.addEventListener('scroll', onScroll);
  const currentScrl = scrl.current;

  return () => {
    if (currentScrl) currentScrl.removeEventListener('scroll', onScroll);
  };
}, [scrollLeft]);

移除已定義而未使用的參數 `{locales}`

共影響 12 個檔案

./src/pages/app/chains/[chainId]/address/[addressId]/index.tsx
290:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/interaction.tsx
292:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/red-flag.tsx
136:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/address/[addressId]/reviews.tsx
128:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/index.tsx
155:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/block/[blockId]/transactions.tsx
135:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/contract/[contractId].tsx
202:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transaction/[transactionId].tsx
174:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/chains/[chainId]/transactions.tsx
164:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/index.tsx
151:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/currencies/[currencyId]/red-flag.tsx
139:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

./src/pages/app/red-flag/[redFlagId].tsx
186:55 Warning: 'locales' is defined but never used. @typescript-eslint/no-unused-vars

補充 : useContext

useContext 是 React 中的一個 hook，它用於在函數組件中獲取上下文（Context）的值。上下文是一種在React中跨多個組件共享值的方法，而不必一層一層地將這些值作為屬性傳遞。

以下是使用 useContext 的基本範例：

創建上下文：首先，你需要創建一個上下文。這可以通過使用 React.createContext 來完成。

// 在某個文件中，例如 context.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

提供上下文值：使用 MyContext.Provider 來提供上下文的值，這通常在應用的最上層組件中進行。

// 在應用的最上層組件中
import React from 'react';
import MyContext from './context.js';

const App = () => {
  const contextValue = "這是上下文的值";

  return (
    <MyContext.Provider value={contextValue}>
      {/* 其他組件嵌套在這裡 */}
    </MyContext.Provider>
  );
}

export default App;

使用 useContext 獲取值：在需要使用上下文值的組件中使用 useContext。

// 在其他組件中
import React, { useContext } from 'react';
import MyContext from './context.js';

const MyComponent = () => {
  const contextValue = useContext(MyContext);

  return (
    <p>{contextValue}</p>
  );
}

export default MyComponent;

這樣，MyComponent 組件就能夠獲取到 MyContext 提供的值，而不需要透過屬性的方式一層一層地傳遞。這使得在React應用中有效地管理和共享狀態變得更加方便。

0130

took 8 hours

Total time: 32 hours

npm run build → Warning: 0 / Error: 0

done.

CAFECA-IO / BAIFA

🛠️ fix build warning #528

警告訊息：

扣除：

Warning 總計: 83 - 2 = 81

參考資料

React Hook useEffect中的依賴項未完整指定

solve: ✅

0126

🟡 Warning: 52 / Error: 0

React Hook useEffect中的依賴項未完整指定

Solve: ✅

React Hook useEffect 中的 'timer' 變數警告

錯誤訊息像是:

錯誤程式碼範例: ./src/components/address_detail/address_detail.tsx

Solve:

1. 改用 useRef 儲存 'timer' variable

2. 刪除第一個 clearTimeout(timer);

結論 - 更新程式碼為：

測試結果

0126 - 18:00 測試

Terminal - Warning messages:

0129

🟡 Warning: 27 / Error: 0

React useCallback hook 依賴陣列包含不必要的依賴項，或者有缺少的依賴項

1. 不必要的依賴項 - 錯誤訊息範例：

程式碼：

Solve:

2. 有缺少的依賴項 - 錯誤訊息範例：

程式碼：

Solve:

Problem

更改前:

更改後:

產生的新問題:

Solve:

第一種：

第二種：

0129

補充 : if schema.prisma updated

Reference : Prisma Development and production

Development environments

useStateRef 第一個狀態值沒有使用

程式碼

改用 useState

理由

參考資料＆延伸閱讀

useStateRef

結論

關於 ref.current 放在 cleanup 函數的警告

警告訊息

程式碼:

修改:

移除已定義而未使用的參數 {locales}

補充 : useContext

0130

1. 改用 `useRef` 儲存 'timer' variable

2. 刪除第一個 `clearTimeout(timer);`

React `useCallback` hook 依賴陣列包含不必要的依賴項，或者有缺少的依賴項

移除已定義而未使用的參數 `{locales}`