質問編集履歴
1
質問内容を具体的にしました
test
CHANGED
File without changes
|
test
CHANGED
@@ -2,41 +2,25 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
+
前回質問したように表示方法が分かれる配列をこちらで質問させていただきました。
|
6
|
+
|
7
|
+
[https://teratail.com/questions/137796](https://teratail.com/questions/137796)
|
8
|
+
|
9
|
+
|
10
|
+
|
5
|
-
|
11
|
+
いただいた丁寧なコードを参考に既存の配列を並べることはできたのですが、まだ選択されていない配列を用意しようとすると、下記のエラーが生じてしまいます。
|
6
12
|
|
7
13
|
|
8
14
|
|
9
15
|
```
|
10
16
|
|
17
|
+
Thumbnails(...): Nothing was returned from render.
|
18
|
+
|
11
|
-
|
19
|
+
This usually means a return statement is missing.
|
20
|
+
|
21
|
+
Or, to render nothing, return null.
|
12
22
|
|
13
23
|
```
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
そして、配列で取得したアイテムのnameを取得したいのですが、下記の表記だとnameエラーとなってしまいます。
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
```
|
22
|
-
|
23
|
-
<p>{selectedItems(name)[(mainImageIndex + i + 1) % items.length]}</p>
|
24
|
-
|
25
|
-
```
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
#### エラー内容
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
```
|
34
|
-
|
35
|
-
RangeError: Invalid array length
|
36
|
-
|
37
|
-
```
|
38
|
-
|
39
|
-
|
40
24
|
|
41
25
|
|
42
26
|
|
@@ -46,7 +30,7 @@
|
|
46
30
|
|
47
31
|
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length
|
48
32
|
|
49
|
-
|
33
|
+
|
50
34
|
|
51
35
|
```
|
52
36
|
|
@@ -62,41 +46,25 @@
|
|
62
46
|
|
63
47
|
|
64
48
|
|
65
|
-
```
|
49
|
+
```
|
66
50
|
|
67
51
|
constructor(props) {
|
68
52
|
|
69
53
|
super(props);
|
70
54
|
|
71
|
-
this.
|
55
|
+
this.imageUrls = [
|
72
56
|
|
73
|
-
ite
|
57
|
+
'https://dummyimage.com/360x240/f29b91/fff&text=1',
|
74
58
|
|
75
|
-
|
59
|
+
'https://dummyimage.com/360x240/efbd40/fff&text=2',
|
76
60
|
|
77
|
-
|
61
|
+
'https://dummyimage.com/360x240/81d654/fff&text=3',
|
78
62
|
|
79
|
-
|
63
|
+
'https://dummyimage.com/360x240/f092c4/fff&text=4',
|
80
64
|
|
81
|
-
|
65
|
+
];
|
82
66
|
|
83
|
-
},
|
84
|
-
|
85
|
-
{
|
86
|
-
|
87
|
-
id: 2,
|
88
|
-
|
89
|
-
name: 'Redux',
|
90
|
-
|
91
|
-
chosen: false,
|
92
|
-
|
93
|
-
|
67
|
+
}
|
94
|
-
|
95
|
-
],
|
96
|
-
|
97
|
-
selectedItems: []
|
98
|
-
|
99
|
-
};
|
100
68
|
|
101
69
|
```
|
102
70
|
|
@@ -104,40 +72,38 @@
|
|
104
72
|
|
105
73
|
```JavaScript
|
106
74
|
|
107
|
-
/// selectedItems = []; を親コンポーネントから引き継いでいます
|
108
|
-
|
109
|
-
|
110
|
-
|
111
75
|
import React from 'react';
|
112
76
|
|
113
77
|
|
114
78
|
|
115
|
-
const Thumbnails = ({
|
79
|
+
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
116
80
|
|
117
|
-
|
81
|
+
<div className="thumbs">
|
118
82
|
|
83
|
+
{!imageUrls.length ? (
|
119
84
|
|
85
|
+
<div>Not choosen yet</div>
|
120
86
|
|
121
|
-
|
87
|
+
) : (
|
122
88
|
|
123
|
-
|
89
|
+
[...Array(imageUrls.length-1)].map((_, i) =>
|
124
90
|
|
125
|
-
<
|
91
|
+
<div key={i}>
|
126
92
|
|
127
|
-
<
|
93
|
+
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
128
94
|
|
129
|
-
|
95
|
+
</div>
|
130
96
|
|
97
|
+
))
|
131
98
|
|
99
|
+
}
|
132
100
|
|
133
|
-
|
101
|
+
</div>
|
134
102
|
|
135
103
|
};
|
136
104
|
|
137
105
|
|
138
106
|
|
139
|
-
|
140
|
-
|
141
|
-
export default Thumbnails
|
107
|
+
export default Thumbnails;
|
142
108
|
|
143
109
|
```
|