質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

6035閲覧

ReactのapiでType 'string | undefined' is not assignable to type 'stringというエラーが出る

Shmupeiii

総合スコア105

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/04/27 15:16

前提

今この記事を参考にして作っています。

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

表示されてる型エラーのとおりなんですが、process.env.REACT_APP_API_KEYundefinedの可能性があるので、APIにわたす前にundefinedチェックをすれば解消されると思います。

js

1if(process.env.REACT_APP_API_KEY===undefined) return

投稿2022/05/01 07:35

k4a

総合スコア983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。