質問編集履歴
1
質問内容を具体的にしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,28 +1,20 @@
|
|
|
1
1
|
#### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
+
前回質問したように表示方法が分かれる配列をこちらで質問させていただきました。
|
|
3
|
-
|
|
4
|
+
[https://teratail.com/questions/137796](https://teratail.com/questions/137796)
|
|
4
5
|
|
|
5
|
-
```
|
|
6
|
-
|
|
6
|
+
いただいた丁寧なコードを参考に既存の配列を並べることはできたのですが、まだ選択されていない配列を用意しようとすると、下記のエラーが生じてしまいます。
|
|
7
|
-
```
|
|
8
7
|
|
|
9
|
-
そして、配列で取得したアイテムのnameを取得したいのですが、下記の表記だとnameエラーとなってしまいます。
|
|
10
|
-
|
|
11
8
|
```
|
|
9
|
+
Thumbnails(...): Nothing was returned from render.
|
|
12
|
-
|
|
10
|
+
This usually means a return statement is missing.
|
|
11
|
+
Or, to render nothing, return null.
|
|
13
12
|
```
|
|
14
13
|
|
|
15
|
-
#### エラー内容
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
RangeError: Invalid array length
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
14
|
#### 試してみたこと
|
|
23
15
|
|
|
24
16
|
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length
|
|
25
|
-
|
|
17
|
+
|
|
26
18
|
```
|
|
27
19
|
a.length = Math.max(0, a.length - 1);
|
|
28
20
|
```
|
|
@@ -30,43 +22,34 @@
|
|
|
30
22
|
|
|
31
23
|
#### ソースコード
|
|
32
24
|
|
|
33
|
-
```
|
|
25
|
+
```
|
|
34
26
|
constructor(props) {
|
|
35
27
|
super(props);
|
|
36
|
-
this.
|
|
28
|
+
this.imageUrls = [
|
|
37
|
-
|
|
29
|
+
'https://dummyimage.com/360x240/f29b91/fff&text=1',
|
|
38
|
-
{
|
|
39
|
-
id: 1,
|
|
40
|
-
|
|
30
|
+
'https://dummyimage.com/360x240/efbd40/fff&text=2',
|
|
41
|
-
|
|
31
|
+
'https://dummyimage.com/360x240/81d654/fff&text=3',
|
|
32
|
+
'https://dummyimage.com/360x240/f092c4/fff&text=4',
|
|
42
|
-
|
|
33
|
+
];
|
|
43
|
-
{
|
|
44
|
-
id: 2,
|
|
45
|
-
name: 'Redux',
|
|
46
|
-
chosen: false,
|
|
47
|
-
|
|
34
|
+
}
|
|
48
|
-
],
|
|
49
|
-
selectedItems: []
|
|
50
|
-
};
|
|
51
35
|
```
|
|
52
36
|
|
|
53
37
|
```JavaScript
|
|
54
|
-
/// selectedItems = []; を親コンポーネントから引き継いでいます
|
|
55
|
-
|
|
56
38
|
import React from 'react';
|
|
57
39
|
|
|
58
|
-
const Thumbnails = ({
|
|
40
|
+
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
41
|
+
<div className="thumbs">
|
|
42
|
+
{!imageUrls.length ? (
|
|
59
|
-
|
|
43
|
+
<div>Not choosen yet</div>
|
|
60
|
-
|
|
44
|
+
) : (
|
|
61
|
-
|
|
45
|
+
[...Array(imageUrls.length-1)].map((_, i) =>
|
|
62
|
-
|
|
46
|
+
<div key={i}>
|
|
63
|
-
|
|
47
|
+
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
64
|
-
|
|
48
|
+
</div>
|
|
65
|
-
|
|
49
|
+
))
|
|
66
|
-
|
|
50
|
+
}
|
|
67
|
-
|
|
51
|
+
</div>
|
|
68
52
|
};
|
|
69
53
|
|
|
70
|
-
|
|
71
|
-
export default Thumbnails
|
|
54
|
+
export default Thumbnails;
|
|
72
55
|
```
|