Reactでの詳細ページの作り方

前提

現在、家の電気機器をWebでコントールできるシステムを作っています。
Backendはできていて、
Reactで全部の機器一覧を表示させるページを作ったのですが
そこから詳細ページを作ろうとした時に
つまずいています。

実現したいこと

機器一覧ページに表示してある各機器をクリックすると
機器詳細ページに飛ぶようにしたい。
詳細ページではクリックした機器だけの情報が
表示されるようにしたい。
（が、やり方がよくわかりません。。。
Backendには機器詳細APIなどはなく、機器一覧のAPIしかありません。
故にそこから、どうやって詳細ページを作るかが悩みどころです。）

わからないこと

どう書いたらDeviceList.js（機器一覧ページ）でクリックした機器の詳細だけをCameraDetail.jsで表示させることができるか？

該当のソースコード

APIで取得できる情報は下記になります。（機器はまだまだ色々ありますがとりあえずカメラのみです。）

Json
1{
2    "attributes": {
3        "camera": [
4            {
5                "entity_id": "camera_1",
6                "object_id": "AMC0570066109434BF",
7                "home": "api/services/home",
8                "away": "api/services/away",
9                "image": "services/camera_proxy/camera_1",
10                "live_stream": "services/camera_proxy_stream/camera_1",
11                "mode": "Home",
12                "room_name": "Main",
13                "state": "Home",
14                "stream": "services/camera_proxy_stream/camera_1",
15                "is_failed": false,
16                "rank": 0,
17                "disabled": false
18            },
19            {
20                "entity_id": "camera_3",
21                "object_id": "Z104E0A3476D0",
22                "home": "api/services/home",
23                "away": "api/services/away",
24                "image": "services/camera_proxy/camera_3",
25                "live_stream": "services/camera_proxy_stream/camera_3",
26                "mode": "Home",
27                "room_name": "Unassigned Devices",
28                "state": "Home",
29                "stream": "services/camera_proxy_stream/camera_3",
30                "is_failed": false,
31                "rank": 0,
32                "disabled": false
33            },
34            {
35                "entity_id": "camera_4",
36                "object_id": "AMC057ED147BD72134",
37                "home": "api/services/home",
38                "away": "api/services/away",
39                "image": "services/camera_proxy/camera_4",
40                "live_stream": "services/camera_proxy_stream/camera_4",
41                "mode": null,
42                "room_name": "Garage",
43                "state": null,
44                "stream": "services/camera_proxy_stream/camera_4",
45                "is_failed": false,
46                "rank": 0,
47                "disabled": false
48            },
49            {
50                "entity_id": "camera_2",
51                "object_id": "AMC05723DA911E755D",
52                "home": "api/services/home",
53                "away": "api/services/away",
54                "image": "services/camera_proxy/camera_2",
55                "live_stream": "services/camera_proxy_stream/camera_2",
56                "mode": null,
57                "room_name": "Unassigned Devices",
58                "state": null,
59                "stream": "services/camera_proxy_stream/camera_2",
60                "is_failed": true,
61                "rank": 0,
62                "disabled": false
63            }
64        ],
65.
66.
67.
68
69

CameraDetail.js

React.js
1
2import React, { useState, useEffect, onClick} from 'react';
3import axios from 'axios';
4import Cookies from 'universal-cookie';
5import { useSelector } from "react-redux";
6import { useParams, Link, useHistory } from 'react-router-dom'
7
8import { useDispatch } from "react-redux";
9import { setUserID } from "../stores/user";
10
11
12const cookies = new Cookies();
13
14const CameraDetail = () => {
15  const history = useHistory();
16
17  const [camera, setCamera] = useState([]);
18
19  const isLoggedIn= useSelector(state => state.user.isLoggedIn);
20
21
22const getDevices = async(data) => {
23  await axios.get('https://xxx.com/devices',
24    {
25      headers: {
26        'Content-Type': 'application/json',
27        'Authorization': `Bearer ${cookies.get('accesstoken')}`
28      },
29    })
30    .then(result => {
31      setCamera(result.data.attributes.camera);  
32    })
33    .catch(err => {
34      console.log(err);
35    });
36}
37
38useEffect(() => {
39  getDevices();
40},[]);
41
42
43  return (
44    <div className="container">
45      {isLoggedIn ? 
46      <div className="row mx-auto text-center">
47        <>
48        ???????????
49        </>
50      </div>
51      :
52      <div>
53          <p> You should login</p>
54      </div>
55      }
56    </div>
57  );
58}
59export default CameraDetail;

Default.js

React.js
1import React from 'react';
2import { Switch, Route } from 'react-router-dom';
3import Top from './Top';
4import Signup from './Signup';
5import Login from './Login';
6import DeviceList from './DeviceList';
7import CameraDetail from './CameraDetail';
8
9
10class Default extends React.Component {
11    render() {
12        return (
13            <div>
14              <div className="main">
15                  <Switch>
16                      <Route exact path="/" component={Top} />
17                      <Route exact path="/signup" component={Signup} />
18                      <Route exact path="/login" component={Login} />
19                      <Route exact path="/device_list" component={DeviceList} />
20                      <Route exact path="/camera_detail/" component={CameraDetail.js} />
21                      <Route render={() => <p>not found!.</p>} />
22                  </Switch>
23              </div>
24            </div>
25        );
26    }
27}
28export default Default;

DeviceList.js

React.js
1import React, { useState, useEffect, onClick} from 'react';
2import axios from 'axios';
3import Cookies from 'universal-cookie';
4import { useSelector } from "react-redux";
5import { useParams, Link, useHistory } from 'react-router-dom'
6
7import { useDispatch } from "react-redux";
8import { setUserID } from "../stores/user";
9
10const cookies = new Cookies();
11
12const DeviceList = () => {
13  const history = useHistory();
14
15  const [camera, setCamera] = useState([]);
16
17  const {id} = useParams();
18  const isLoggedIn= useSelector(state => state.user.isLoggedIn);
19  const userID= useSelector(state => state.user.userID);
20
21
22const getDevices = async(data) => {
23  await axios.get('https://xxx.com/devices',
24    {
25      headers: {
26        'Content-Type': 'application/json',
27        'Authorization': `Bearer ${cookies.get('accesstoken')}`
28      },
29    })
30    .then(result => {
31      setCamera(result.data.attributes.camera);  
32    })
33    .catch(err => {
34      console.log(err);
35    });
36}
37
38useEffect(() => {
39  getDevices();
40},[]);
41
42
43  return (
44    <div className="container">
45    <div className="row mx-auto">
46      <div className="col-md-4 mx-auto text-center">
47      {isLoggedIn ? 
48      <div>
49          <p>Camera List</p>
50          <div>
51                {camera.map((item,i) => 
52                  <div key={i}>
53                    <p>-------</p>
54                    <p>Entity Id: {item.entity_id}</p>
55                    <p>Object Id: {item.object_id}</p>
56                    <p>Home: {item.home}</p>
57                    <p>Away: {item.away}</p>
58                    <p>Image: {item.image}</p>
59                    <p>is_failed: {item.is_failed}</p>
60                    <p>Live Stream: {item.live_stream}</p>
61                    <p>Rank: {item.rank}</p>
62                    <p>Room Name: {item.room_name}</p>
63                    <p>State: {item.state}</p>
64                  </div>
65                )}
66          </div>
67      </div>
68      :
69      <div>
70          <p> You should login</p>
71      </div>
72      }
73      </div>
74    </div>
75    </div>
76  );
77}
78export default DeviceList;

行動規範の内容に同意します

回答1件

自己解決

こちらで解決しました。

Default.js

Before: <Route exact path="/device_detail/" component={DeviceDetail} />

After: <Route path="/device_detail/:entity_id" component={DeviceDetail} />

CameraDetail.js

const { entity_id } = useParams();


  return (
    <div className="container">
      {isLoggedIn ? 
      <div className="row mx-auto text-center">
          <>

                {camera.filter(c => c.entity_id === entity_id).map((item,i) => 
                  <div key={i} className="discover_device col-4">
                    <div className="box h-100">
                    <p>{item.room_name}</p>
                    <p>{item.entity_id}</p>
                    <Link to={`/device_list`} className='btn btn-primary col-4'>Back</Link>
                    </div>
                  </div>
                )}
          </>
      </div>
      :
      <div>
          <p> You should login</p>
      </div>
      }
    </div>
  );

DeviceList.js

Before: <Link to={`/camera_detail/`}>
After: <Link to={`/camera_detail/${item.entity_id}`}>

投稿2022/09/07 04:18

Tomato_leaf

総合スコア173

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！