質問編集履歴
2
抜け修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
|
|
235
235
|
import { db } from '../../Firebase';
|
|
236
236
|
|
|
237
|
-
|
|
237
|
+
import { useCollectionData } from "react-firebase-hooks/firestore";
|
|
238
238
|
|
|
239
239
|
|
|
240
240
|
|
1
別の方法でうまくいったことを明記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -213,3 +213,81 @@
|
|
|
213
213
|
|
|
214
214
|
|
|
215
215
|
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
cf.
|
|
220
|
+
|
|
221
|
+
一応functionコンポーネントでも
|
|
222
|
+
|
|
223
|
+
`import { useCollectionData } from "react-firebase-hooks/firestore";`
|
|
224
|
+
|
|
225
|
+
これを使ったらシンプルにコード書くことはできました。
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
```js
|
|
230
|
+
|
|
231
|
+
import React from 'react';
|
|
232
|
+
|
|
233
|
+
import { Link } from 'react-router-dom';
|
|
234
|
+
|
|
235
|
+
import { db } from '../../Firebase';
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
// functionコンポーネント
|
|
242
|
+
|
|
243
|
+
const Index = () => {
|
|
244
|
+
|
|
245
|
+
const [ list, loading, error ] = useCollectionData(
|
|
246
|
+
|
|
247
|
+
db.collection('users'),
|
|
248
|
+
|
|
249
|
+
{ idField: 'docId' }
|
|
250
|
+
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
if (loading) return <div>Loading...</div>;
|
|
254
|
+
|
|
255
|
+
if (error) return <div>Error...</div>;
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
return (
|
|
260
|
+
|
|
261
|
+
<React.Fragment>
|
|
262
|
+
|
|
263
|
+
<section>
|
|
264
|
+
|
|
265
|
+
<h2>一覧表示</h2>
|
|
266
|
+
|
|
267
|
+
{list.map(item => (
|
|
268
|
+
|
|
269
|
+
<div key={item.docId + String(new Date())}>
|
|
270
|
+
|
|
271
|
+
<div>{item.name}</div>
|
|
272
|
+
|
|
273
|
+
<div>{item.email}</div>
|
|
274
|
+
|
|
275
|
+
<div><Link to={`/users/Detail/${item.docId}`}>詳細</Link></div>
|
|
276
|
+
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
))}
|
|
280
|
+
|
|
281
|
+
</section>
|
|
282
|
+
|
|
283
|
+
</React.Fragment>
|
|
284
|
+
|
|
285
|
+
);
|
|
286
|
+
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
export default Index;
|
|
292
|
+
|
|
293
|
+
```
|