質問編集履歴

1

質問内容を具体的にしました

2018/07/27 11:56

投稿

k10a
k10a

スコア35

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
- Reactで最初は空(選択しに配列が追加される)の配列に下記のようなlength を試みるとLengthinvalid error起こります。
11
+ だいた丁寧なコードを参考既存の配列を並べることはできたのです、まだ選択されていない配列を用意しようとすると、下記エラー生じてしいます。
6
12
 
7
13
 
8
14
 
9
15
  ```
10
16
 
17
+ Thumbnails(...): Nothing was returned from render.
18
+
11
- [...Array(imageUrls.length-1)].map((_, i) =>
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
- ```JavaScript
49
+ ```
66
50
 
67
51
  constructor(props) {
68
52
 
69
53
  super(props);
70
54
 
71
- this.state = {
55
+ this.imageUrls = [
72
56
 
73
- items: [
57
+ 'https://dummyimage.com/360x240/f29b91/fff&text=1',
74
58
 
75
- {
59
+ 'https://dummyimage.com/360x240/efbd40/fff&text=2',
76
60
 
77
- id: 1,
61
+ 'https://dummyimage.com/360x240/81d654/fff&text=3',
78
62
 
79
- name: 'React',
63
+ 'https://dummyimage.com/360x240/f092c4/fff&text=4',
80
64
 
81
- chosen: false,
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 = ({ mainImageIndex, selectedItems }) => {
79
+ const Thumbnails = ({mainImageIndex, imageUrls}) => {
116
80
 
117
- const count = Math.max(0, selectedItems.length - 1);
81
+ <div className="thumbs">
118
82
 
83
+ {!imageUrls.length ? (
119
84
 
85
+ <div>Not choosen yet</div>
120
86
 
121
- const thumbs = [...Array(count.length)].map((_, i) =>
87
+ ) : (
122
88
 
123
- <div key={i}>
89
+ [...Array(imageUrls.length-1)].map((_, i) =>
124
90
 
125
- <p>{selectedItems(name)[(mainImageIndex + i + 1) % items.length]}</p>
91
+ <div key={i}>
126
92
 
127
- </div>
93
+ <img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
128
94
 
129
- );
95
+ </div>
130
96
 
97
+ ))
131
98
 
99
+ }
132
100
 
133
- return <div className="thumbs">{thumbs}</div>;
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
  ```