
前提
今この記事を参考にして作っています。
https://zenn.dev/shimapon3/articles/13e3d4b147742c
表示したいと考えているのですが、ローカル環境でエラーが出てしまいました。
headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
の書き方がおかしい感じでしょうか。
記事と違う点は、axiosなどを yarn ではなく npm installで落としました。
回答が分かる方がいればよろしくお願いします。
発生している問題・エラーメッセージ
webpack compiled successfully ERROR in src/components/Main.tsx:34:20 TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'. Type 'undefined' is not assignable to type 'string | number | boolean'. 32 | axios 33 | .get("https://opendata.resas-portal.go.jp/api/v1/prefectures", { > 34 | headers: { "X-API-KEY": process.env.REACT_APP_API_KEY }, | ^^^^^^^^^^^ 35 | }) 36 | .then((results: any) => { 37 | setPreFectures(results.data); ERROR in src/components/Main.tsx:63:24 TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'. 61 | String(prefCode), 62 | { > 63 | headers: { "X-API-KEY": process.env.REACT_APP_API_KEY }, | ^^^^^^^^^^^ 64 | } 65 | ) 66 | .then((results: any) => {
該当のソースコード
javascript
1import React, { useEffect, useState } from "react"; 2import CheckField from "./CheckField"; 3import Graph from "./Graph"; 4import axios from "axios"; 5 6const Styles: { [key: string]: React.CSSProperties } = { 7 graph: { 8 padding: "10px", 9 }, 10 label: { 11 fontSize: "20px", 12 padding: "0.5rem 2rem", 13 borderLeft: "4px solid #000", 14 marginLeft: "10pt", 15 }, 16}; 17 18const Main: React.FC = () => { 19 const [prefectures, setPreFectures] = useState<{ 20 message: null; 21 result: { 22 prefCode: number; 23 prefName: string; 24 }[]; 25 } | null>(null); 26 const [prefPopulation, setPrefPopulation] = useState< 27 { prefName: string; data: { year: number; value: number }[] }[] 28 >([]); 29 30 useEffect(() => { 31 // 都道府県一覧を取得する 32 axios 33 .get("https://opendata.resas-portal.go.jp/api/v1/prefectures", { 34 headers: { "X-API-KEY": process.env.REACT_APP_API_KEY }, 35 }) 36 .then((results: any) => { 37 setPreFectures(results.data); 38 }) 39 .catch((error: any) => {}); 40 }, []); 41 42 // チェックボックスをクリックした際の処理 43 const handleClickCheck = ( 44 prefName: string, 45 prefCode: number, 46 check: boolean 47 ) => { 48 let c_prefPopulation = prefPopulation.slice(); 49 50 // チェックをつけた処理 51 if (check) { 52 if ( 53 c_prefPopulation.findIndex((value) => value.prefName === prefName) !== 54 -1 55 ) 56 return; 57 58 axios 59 .get( 60 "https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=" + 61 String(prefCode), 62 { 63 headers: { "X-API-KEY": process.env.REACT_APP_API_KEY }, 64 } 65 ) 66 .then((results: any) => { 67 c_prefPopulation.push({ 68 prefName: prefName, 69 data: results.data.result.data[0].data, 70 }); 71 72 setPrefPopulation(c_prefPopulation); 73 }) 74 .catch((error: any) => { 75 return; 76 }); 77 } 78 // チェックを外した処理 79 else { 80 const deleteIndex = c_prefPopulation.findIndex( 81 (value) => value.prefName === prefName 82 ); 83 if (deleteIndex === -1) return; 84 c_prefPopulation.splice(deleteIndex, 1); 85 setPrefPopulation(c_prefPopulation); 86 } 87 }; 88 89 return ( 90 <main> 91 <h2 style={Styles.label}>都道府県</h2> 92 {prefectures && ( 93 <CheckField 94 prefectures={prefectures.result} 95 onChange={handleClickCheck} 96 /> 97 )} 98 <h2 style={Styles.label}>人口推移グラフ</h2> 99 <Graph populationdata={prefPopulation} /> 100 </main> 101 ); 102}; 103 104export default Main;
補足情報(FW/ツールのバージョンなど)
javascript
1{ 2 3"name": "react-highcharts", 4 5"version": "0.1.0", 6 7"private": true, 8 9"dependencies": { 10 11"@testing-library/jest-dom": "^5.16.4", 12 13"@testing-library/react": "^13.1.1", 14 15"@testing-library/user-event": "^13.5.0", 16 17"@types/jest": "^27.4.1", 18 19"@types/node": "^16.11.31", 20 21"@types/react": "^18.0.8", 22 23"@types/react-dom": "^18.0.0", 24 25"highcharts": "^10.0.0", 26 27"highcharts-react-official": "^3.1.0", 28 29"react": "^18.1.0", 30 31"react-dom": "^18.1.0", 32 33"react-scripts": "5.0.1", 34 35"typescript": "^4.6.3", 36 37"web-vitals": "^2.1.4" 38 39}, 40 41"scripts": { 42 43"start": "react-scripts start", 44 45"build": "react-scripts build", 46 47"test": "react-scripts test", 48 49"eject": "react-scripts eject" 50 51}, 52 53"eslintConfig": { 54 55"extends": [ 56 57"react-app", 58 59"react-app/jest" 60 61] 62 63}, 64 65"browserslist": { 66 67"production": [ 68 69">0.2%", 70 71"not dead", 72 73"not op_mini all" 74 75], 76 77"development": [ 78 79"last 1 chrome version", 80 81"last 1 firefox version", 82 83"last 1 safari version" 84 85] 86 87}, 88 89"devDependencies": { 90 91"axios": "^0.27.2" 92 93} 94 95}

https://qiita.com/ckjets/items/9f3e31f2bd7595af13a3
こちら参考になりませんか?
