teratail
回答率
85.48%
質問するログイン新規登録
トップNext.jsに関する質問Next.js + TypeScriptで連想配列をmapで出力する

編集履歴

質問編集履歴

5

誤字の修正

2022/05/09 08:39

投稿

sykdesunen
sykdesunen

スコア1

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  ### 実現したいこと
20
20
  getStaticProps()を使って連想配列を出力したいと考えています。
21
- しかし、``` List.map((work) => { ```の部分で
21
+ しかし、``` List.map(() => { ```の部分で
22
22
  ``` TypeError: Cannot read properties of undefined (reading 'map') ```
23
23
  となってしまいます。
24
24
  ```const CardList = ({ List }) => {``` のところで ```implicitly has an 'any' type``` となっているため、ここが原因なのは分かるのですがそれ以上のことが自分ではわからないため、ご教授いただければと思います。
@@ -33,19 +33,19 @@
33
33
  ```
34
34
  ```CardList/index.tsx
35
35
  import React from 'react'
36
- import Work from '@/common/types/works'
36
+ import List from '@/common/types/List'
37
37
  import Card from '@/components/molecules/Card'
38
38
  import { List } from '@/path-to/List'
39
39
 
40
40
  type Props = {
41
- List: List[]
41
+ list: List[]
42
42
  };
43
43
 
44
- const CardList: React.FC<Props> = ({ List }) => {
44
+ const CardList: React.FC<Props> = ({ list }) => {
45
45
  return (
46
46
  <ul>
47
47
  {
48
- List.map((item) => {
48
+ list.map((item) => {
49
49
  <Card
50
50
  title = { item.title }
51
51
  media = { item.image }
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  export const getStaticProps: GetStaticProps = async () => {
61
- return { props: { works } };
61
+ return { props: { list } };
62
62
  }
63
63
 
64
64
  export default CardList
Next.jsTypeScript

4

誤字の修正

2022/05/09 08:30

投稿

sykdesunen
sykdesunen

スコア1

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
  import { List } from '@/path-to/List'
39
39
 
40
40
  type Props = {
41
- works: Work[]
41
+ List: List[]
42
42
  };
43
43
 
44
44
  const CardList: React.FC<Props> = ({ List }) => {
@@ -64,13 +64,13 @@
64
64
  export default CardList
65
65
  ```
66
66
  ```types/Works.ts
67
- type WorkType = {
67
+ type ListType = {
68
68
  title: string;
69
69
  image: string;
70
70
  description: string;
71
71
  }
72
72
 
73
- export default WorkType
73
+ export default ListType
74
74
  ```
75
75
 
76
76
  ```
Next.jsTypeScript

3

ソースコードの更新

2022/05/08 09:40

投稿

sykdesunen
sykdesunen

スコア1

test CHANGED
File without changes
test CHANGED
@@ -31,13 +31,17 @@
31
31
  { "title": "dummy", "image": "dummy.jpg", "description": "dummydummy", },
32
32
  ];
33
33
  ```
34
- ```CardList/inex.tsx
34
+ ```CardList/index.tsx
35
35
  import React from 'react'
36
+ import Work from '@/common/types/works'
36
37
  import Card from '@/components/molecules/Card'
37
38
  import { List } from '@/path-to/List'
38
39
 
40
+ type Props = {
41
+ works: Work[]
42
+ };
39
43
 
40
- const CardList = ({ List }) => {
44
+ const CardList: React.FC<Props> = ({ List }) => {
41
45
  return (
42
46
  <ul>
43
47
  {
@@ -53,32 +57,20 @@
53
57
  )
54
58
  }
55
59
 
56
- export async function getStaticProps() {
60
+ export const getStaticProps: GetStaticProps = async () => {
57
- return { props: { List } };
61
+ return { props: { works } };
58
62
  }
59
63
 
60
64
  export default CardList
61
65
  ```
62
- ```Card.tsx
66
+ ```types/Works.ts
63
- import React from 'react'
64
- import Thumbnail from '@/components/atoms/Thumbnail'
65
- interface Props {
67
+ type WorkType = {
66
68
  title: string;
67
- media: string;
69
+ image: string;
68
70
  description: string;
69
71
  }
70
72
 
71
- const Card = ({ title, media, description }) => {
72
- return (
73
- <li>
74
- <h3>{ title } < /h3>
75
- < p > { description } < /p>
76
- < Thumbnail src = { media } />
77
- < /li>
78
- )
79
- }
80
-
81
- export default Card
73
+ export default WorkType
82
74
  ```
83
75
 
84
76
  ```
@@ -88,4 +80,5 @@
88
80
  ### 参考にした記事
89
81
  [[Next.js]mapを使って連想配列を出力してみる](https://2001y.me/blog/web/nextjs-getstaticprops-array-map/)
90
82
  [getStaticProps](https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-props)
83
+ [blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript)
91
84
 
Next.jsTypeScript

2

実現したいこと＞原因の追記

2022/05/08 02:00

投稿

sykdesunen
sykdesunen

スコア1

test CHANGED
File without changes
test CHANGED
@@ -21,7 +21,7 @@
21
21
  しかし、``` List.map((work) => { ```の部分で
22
22
  ``` TypeError: Cannot read properties of undefined (reading 'map') ```
23
23
  となってしまいます。
24
- どれが原因でundefinedになってしまっているのか自分ではわからないため、ご教授いただければと思います。
24
+ ```const CardList = ({ List }) => {``` のところで ```implicitly has an 'any' type``` となっているため、ここが原因なのは分かるのですがそれ以上のことが自分ではわからないため、ご教授いただければと思います。
25
25
 
26
26
  ### ソースコード
27
27
  ```list.ts
Next.jsTypeScript

1

内容の修正

2022/05/07 11:39

投稿

sykdesunen
sykdesunen

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,21 @@
1
+ ### 環境
2
+ ```package.json
3
+ "dependencies": {
4
+ "next": "12.1.6",
5
+ "react": "18.1.0",
6
+ "react-dom": "18.1.0",
7
+ "react-router-dom": "^6.3.0"
8
+ },
9
+ "devDependencies": {
10
+ "@types/node": "17.0.31",
11
+ "@types/react": "18.0.8",
12
+ "@types/react-dom": "18.0.3",
13
+ "classnames": "^2.3.1",
14
+ "typescript": "^4.6.4",
15
+ ...省略
16
+ }
17
+ ```
18
+
1
19
  ### 実現したいこと
2
20
  getStaticProps()を使って連想配列を出力したいと考えています。
3
21
  しかし、``` List.map((work) => { ```の部分で
@@ -67,25 +85,6 @@
67
85
  Unhandled Runtime Error
68
86
  TypeError: Cannot read properties of undefined (reading 'map')
69
87
  ```
70
-
71
- ### 環境
72
- ```package.json
73
- "dependencies": {
74
- "next": "12.1.6",
75
- "react": "18.1.0",
76
- "react-dom": "18.1.0",
77
- "react-router-dom": "^6.3.0"
78
- },
79
- "devDependencies": {
80
- "@types/node": "17.0.31",
81
- "@types/react": "18.0.8",
82
- "@types/react-dom": "18.0.3",
83
- "classnames": "^2.3.1",
84
- "typescript": "^4.6.4",
85
- ...省略
86
- }
87
- ```
88
-
89
88
  ### 参考にした記事
90
89
  [[Next.js]mapを使って連想配列を出力してみる](https://2001y.me/blog/web/nextjs-getstaticprops-array-map/)
91
90
  [getStaticProps](https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-props)
Next.jsTypeScript