質問編集履歴

1

回答の内容に修正したコードを追記しました

2019/08/24 06:45

投稿

wisheebell
wisheebell

スコア7

test CHANGED
File without changes
test CHANGED
@@ -141,3 +141,239 @@
141
141
  cloud9
142
142
 
143
143
  React.js v16.8.6
144
+
145
+
146
+
147
+ ###追記
148
+
149
+ 回答のコメントより、改善したものを追記します。
150
+
151
+ ```Index
152
+
153
+ import React, { Component } from 'react'
154
+
155
+ import { withRouter } from 'react-router';
156
+
157
+ import axios from 'axios';
158
+
159
+ import Typography from '@material-ui/core/Typography'
160
+
161
+ import Post from '../component/Post';
162
+
163
+
164
+
165
+ class Index extends Component {
166
+
167
+ constructor(props) {
168
+
169
+ super(props)
170
+
171
+ this.state = {
172
+
173
+ posts: []
174
+
175
+ }
176
+
177
+ }
178
+
179
+
180
+
181
+
182
+
183
+ componentDidMount() {
184
+
185
+ axios
186
+
187
+ .get('https://6ccf1b5402214ffdb31120bbd0a35c58.vfs.cloud9.us-east-2.amazonaws.com/api/v1/posts')
188
+
189
+ .then((results) => {
190
+
191
+ console.log(results)
192
+
193
+ this.setState({ posts: results.data })
194
+
195
+ })
196
+
197
+ .catch((data) =>{
198
+
199
+ console.log(data)
200
+
201
+ })
202
+
203
+ }
204
+
205
+
206
+
207
+ render(){
208
+
209
+ return(
210
+
211
+ <div>
212
+
213
+ {(() => {
214
+
215
+ if (this.state.posts.length > 0) {
216
+
217
+ return (
218
+
219
+ this.state.posts.map( (post, i) => {
220
+
221
+ return(
222
+
223
+ <Post
224
+
225
+ key={i}
226
+
227
+ createdAt={post.created_at}
228
+
229
+ name='testUser'
230
+
231
+ title={post.title}
232
+
233
+ content={post.content}
234
+
235
+ />
236
+
237
+ )
238
+
239
+ })
240
+
241
+ )
242
+
243
+ } else {
244
+
245
+ return (
246
+
247
+ <Typography variant="h6" component="h2">
248
+
249
+ まだなにも投稿されていません。
250
+
251
+ </Typography>
252
+
253
+ )
254
+
255
+ }
256
+
257
+ })()}
258
+
259
+ </div>
260
+
261
+ );
262
+
263
+ }
264
+
265
+ }
266
+
267
+
268
+
269
+ export default Index;
270
+
271
+ ```
272
+
273
+ ```Post
274
+
275
+ import React, { Component } from 'react';
276
+
277
+ import { makeStyles, withStyles } from '@material-ui/core/styles';
278
+
279
+ import Card from '@material-ui/core/Card';
280
+
281
+ import CardActions from '@material-ui/core/CardActions';
282
+
283
+ import CardContent from '@material-ui/core/CardContent';
284
+
285
+ import Button from '@material-ui/core/Button';
286
+
287
+ import Typography from '@material-ui/core/Typography';
288
+
289
+
290
+
291
+ class Post extends Component {
292
+
293
+ render(){
294
+
295
+ const classes = makeStyles({
296
+
297
+ card: {
298
+
299
+ minWidth: 275,
300
+
301
+ },
302
+
303
+ bullet: {
304
+
305
+ display: 'inline-block',
306
+
307
+ margin: '0 2px',
308
+
309
+ transform: 'scale(0.8)',
310
+
311
+ },
312
+
313
+ title: {
314
+
315
+ fontSize: 14,
316
+
317
+ },
318
+
319
+ pos: {
320
+
321
+ marginBottom: 12,
322
+
323
+ },
324
+
325
+ });
326
+
327
+
328
+
329
+ return (
330
+
331
+ <Card className={classes.card}>
332
+
333
+ <CardContent>
334
+
335
+ <Typography className={classes.title} color="textSecondary" gutterBottom>
336
+
337
+ {this.props.createdAt}
338
+
339
+ </Typography>
340
+
341
+ <Typography variant="h5" component="h2">
342
+
343
+ {this.props.name}
344
+
345
+ </Typography>
346
+
347
+ <Typography className={classes.pos} color="textSecondary">
348
+
349
+ {this.props.title}
350
+
351
+ </Typography>
352
+
353
+ <Typography variant="body2" component="p">
354
+
355
+ {this.props.content}
356
+
357
+ </Typography>
358
+
359
+ </CardContent>
360
+
361
+ <CardActions>
362
+
363
+ <Button size="small">Learn More...</Button>
364
+
365
+ </CardActions>
366
+
367
+ </Card>
368
+
369
+ );
370
+
371
+ }
372
+
373
+ }
374
+
375
+
376
+
377
+ export default Post;
378
+
379
+ ```