teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問propsの配列データの受け渡しがうまくいかない

編集履歴

質問編集履歴

2

修正

2022/01/02 12:52

投稿

aren3
aren3

スコア9

test CHANGED
@@ -1 +1 @@
1
- propsのデータの受け渡しがうまくいかない
1
+ propsの配列データの受け渡しがうまくいかない
test CHANGED
File without changes

1

修正

2022/01/02 12:51

投稿

aren3
aren3

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,231 +1,239 @@
1
+ ```
2
+
3
+ (src/types/spotData.tsx)
4
+
5
+
6
+
7
+ export type spotData = {
8
+
9
+ spot: Array<spotData>;
10
+
11
+ };
12
+
13
+ ```
14
+
15
+
16
+
1
17
  ```
2
18
 
3
19
  (src/pages/index.tsx)
4
20
 
5
21
 
6
22
 
23
+ const Index: NextPage = () => {
24
+
25
+ const [spot, setSpot] = useState<spotData[]>([]);
26
+
27
+
28
+
29
+ const fetchSpot = useCallback(async () => {
30
+
31
+ const data: string[] | undefined = await getSpots();
32
+
7
- type spotData = {
33
+ setSpot(data || []);
34
+
8
-
35
+ }, []);
36
+
37
+
38
+
39
+ useEffect(() => {
40
+
41
+ fetchSpot();
42
+
43
+ }, [fetchSpot]);
44
+
45
+
46
+
47
+ return (
48
+
49
+ <UserLayout>
50
+
9
- spot: Array<spotData>;
51
+ <SpotCard spot={spot} />
52
+
53
+ // 上記の行でエラーメッセージが出ています
54
+
55
+ </UserLayout>
56
+
57
+ );
10
58
 
11
59
  };
12
60
 
13
61
 
14
62
 
15
- const Index: NextPage = () => {
63
+ export default Index;
64
+
16
-
65
+ ```
66
+
67
+
68
+
69
+ ```
70
+
71
+ (src/components/Spot/SpotCard/index.tsx)
72
+
73
+
74
+
17
- const [spot, setSpot] = useState<spotData[]>([]);
75
+ export const SpotCard: VFC<spotData> = (props) => {
18
-
19
-
20
-
21
- const fetchSpot = useCallback(async () => {
76
+
22
-
23
- const data: string[] | undefined = await getSpots();
24
-
25
- setSpot(data || []);
26
-
27
- }, []);
28
-
29
-
30
-
31
- useEffect(() => {
32
-
33
- fetchSpot();
34
-
35
- }, [fetchSpot]);
77
+ console.log(props);
78
+
79
+
80
+
81
+ const { spot } = props;
82
+
83
+ const property = {
84
+
85
+ imageUrl: 'spot-pic.jpeg',
86
+
87
+ imageAlt: 'props.image_url',
88
+
89
+ heart: '12',
90
+
91
+ };
36
92
 
37
93
 
38
94
 
39
95
  return (
40
96
 
97
+ <Flex
98
+
99
+ bg={useColorModeValue('#F9FAFB', 'gray.600')}
100
+
101
+ p={50}
102
+
103
+ w='full'
104
+
105
+ alignItems='center'
106
+
107
+ justifyContent='center'
108
+
109
+ >
110
+
111
+ <Box
112
+
113
+ bg={useColorModeValue('white', 'gray.800')}
114
+
115
+ maxW='sm'
116
+
117
+ borderWidth='1px'
118
+
119
+ rounded='lg'
120
+
121
+ shadow='lg'
122
+
123
+ >
124
+
125
+ <div className='relative text-center text-xs md:w-30 h-50'>
126
+
127
+ <Image src={property.imageUrl} alt={property.imageAlt} roundedTop='lg' />
128
+
129
+ <div className='absolute flex flex-col text-white text-center top-0 left-0 '>
130
+
41
- <UserLayout>
131
+ <PrefectureButton />
42
-
132
+
43
- <SpotCard spot={spot} />
133
+ <SystemButton />
134
+
44
-
135
+ </div>
136
+
137
+ </div>
138
+
139
+
140
+
141
+ <Box p='6' mt='3'>
142
+
143
+ <Box d='flex'>
144
+
145
+ <Box
146
+
147
+ color='blsck.500'
148
+
149
+ fontWeight='semibold'
150
+
151
+ letterSpacing='wide'
152
+
153
+ fontSize='md'
154
+
155
+ textTransform='uppercase'
156
+
157
+ ml='2'
158
+
159
+ >
160
+
161
+ <div className='flex mb-2 mr-2'>
162
+
163
+ <Image src='/map-marker-icon.png' alt='地図マーカーアイコン' />
164
+
165
+ <div className='mt-1 ml-1'> {name}</div>
166
+
45
- // 上記の行でエラーメッセージが出ています
167
+ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
168
+
169
+
170
+
46
-
171
+ </div>
172
+
173
+ </Box>
174
+
175
+ </Box>
176
+
177
+ <Box mt='10' mb='5' as='h4' fontSize='lg' lineHeight='tight'>
178
+
179
+ <div className='text-md'>{title}</div>
180
+
181
+ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
182
+
183
+ </Box>
184
+
185
+ <Box>
186
+
187
+ <div className='flex justify-between mb-2 mr-2'>
188
+
189
+ <div className='flex'>
190
+
191
+ <Image
192
+
193
+ borderRadius='full'
194
+
195
+ boxSize='50px'
196
+
197
+ src='/admin-test-pic.jpg'
198
+
199
+ alt='props.image_url'
200
+
201
+ />
202
+
203
+ <div className='ml-2 mt-4'>{area}</div>
204
+
205
+ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
206
+
207
+ </div>
208
+
209
+ <Box as='span' color='black.600' fontSize='md'></Box>
210
+
211
+ <div className='flex text-right mt-3'>
212
+
213
+ <div className='mt-1'>
214
+
215
+ <Image src='/heart-line.png' width={5} height={5} alt='ハートアイコン' />
216
+
217
+ </div>
218
+
219
+ <div className='text-lg ml-1'>{property.heart}</div>
220
+
221
+ </div>
222
+
223
+ </div>
224
+
225
+ </Box>
226
+
227
+ </Box>
228
+
229
+ </Box>
230
+
47
- </UserLayout>
231
+ </Flex>
48
232
 
49
233
  );
50
234
 
51
235
  };
52
236
 
53
-
54
-
55
- export default Index;
56
-
57
- ```
58
-
59
-
60
-
61
- ```
62
-
63
- (src/components/Spot/SpotCard/index.tsx)
64
-
65
-
66
-
67
- export const SpotCard: VFC<spotData> = (props) => {
68
-
69
- console.log(props);
70
-
71
-
72
-
73
- const { spot } = props;
74
-
75
- const property = {
76
-
77
- imageUrl: 'spot-pic.jpeg',
78
-
79
- imageAlt: 'props.image_url',
80
-
81
- heart: '12',
82
-
83
- };
84
-
85
-
86
-
87
- return (
88
-
89
- <Flex
90
-
91
- bg={useColorModeValue('#F9FAFB', 'gray.600')}
92
-
93
- p={50}
94
-
95
- w='full'
96
-
97
- alignItems='center'
98
-
99
- justifyContent='center'
100
-
101
- >
102
-
103
- <Box
104
-
105
- bg={useColorModeValue('white', 'gray.800')}
106
-
107
- maxW='sm'
108
-
109
- borderWidth='1px'
110
-
111
- rounded='lg'
112
-
113
- shadow='lg'
114
-
115
- >
116
-
117
- <div className='relative text-center text-xs md:w-30 h-50'>
118
-
119
- <Image src={property.imageUrl} alt={property.imageAlt} roundedTop='lg' />
120
-
121
- <div className='absolute flex flex-col text-white text-center top-0 left-0 '>
122
-
123
- <PrefectureButton />
124
-
125
- <SystemButton />
126
-
127
- </div>
128
-
129
- </div>
130
-
131
-
132
-
133
- <Box p='6' mt='3'>
134
-
135
- <Box d='flex'>
136
-
137
- <Box
138
-
139
- color='blsck.500'
140
-
141
- fontWeight='semibold'
142
-
143
- letterSpacing='wide'
144
-
145
- fontSize='md'
146
-
147
- textTransform='uppercase'
148
-
149
- ml='2'
150
-
151
- >
152
-
153
- <div className='flex mb-2 mr-2'>
154
-
155
- <Image src='/map-marker-icon.png' alt='地図マーカーアイコン' />
156
-
157
- <div className='mt-1 ml-1'> {name}</div>
158
-
159
- 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
160
-
161
-
162
-
163
- </div>
164
-
165
- </Box>
166
-
167
- </Box>
168
-
169
- <Box mt='10' mb='5' as='h4' fontSize='lg' lineHeight='tight'>
170
-
171
- <div className='text-md'>{title}</div>
172
-
173
- 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
174
-
175
- </Box>
176
-
177
- <Box>
178
-
179
- <div className='flex justify-between mb-2 mr-2'>
180
-
181
- <div className='flex'>
182
-
183
- <Image
184
-
185
- borderRadius='full'
186
-
187
- boxSize='50px'
188
-
189
- src='/admin-test-pic.jpg'
190
-
191
- alt='props.image_url'
192
-
193
- />
194
-
195
- <div className='ml-2 mt-4'>{area}</div>
196
-
197
- 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 上記の行でエラーメッセージが出ています
198
-
199
- </div>
200
-
201
- <Box as='span' color='black.600' fontSize='md'></Box>
202
-
203
- <div className='flex text-right mt-3'>
204
-
205
- <div className='mt-1'>
206
-
207
- <Image src='/heart-line.png' width={5} height={5} alt='ハートアイコン' />
208
-
209
- </div>
210
-
211
- <div className='text-lg ml-1'>{property.heart}</div>
212
-
213
- </div>
214
-
215
- </div>
216
-
217
- </Box>
218
-
219
- </Box>
220
-
221
- </Box>
222
-
223
- </Flex>
224
-
225
- );
226
-
227
- };
228
-
229
237
  ```
230
238
 
231
239