Q&A前提
現在、家の電気機器を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件
0
自己解決
こちらで解決しました。
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
総合スコア178
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。