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

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

新規登録して質問してみよう
ただいま回答率
86.12%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

Tomato_leaf
Tomato_leaf

総合スコア148

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

261閲覧

投稿2022/09/04 06:37

前提

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

実現したいこと

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

わからないこと

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

該当のソースコード

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

Json

{ "attributes": { "camera": [ { "entity_id": "camera_1", "object_id": "AMC0570066109434BF", "home": "api/services/home", "away": "api/services/away", "image": "services/camera_proxy/camera_1", "live_stream": "services/camera_proxy_stream/camera_1", "mode": "Home", "room_name": "Main", "state": "Home", "stream": "services/camera_proxy_stream/camera_1", "is_failed": false, "rank": 0, "disabled": false }, { "entity_id": "camera_3", "object_id": "Z104E0A3476D0", "home": "api/services/home", "away": "api/services/away", "image": "services/camera_proxy/camera_3", "live_stream": "services/camera_proxy_stream/camera_3", "mode": "Home", "room_name": "Unassigned Devices", "state": "Home", "stream": "services/camera_proxy_stream/camera_3", "is_failed": false, "rank": 0, "disabled": false }, { "entity_id": "camera_4", "object_id": "AMC057ED147BD72134", "home": "api/services/home", "away": "api/services/away", "image": "services/camera_proxy/camera_4", "live_stream": "services/camera_proxy_stream/camera_4", "mode": null, "room_name": "Garage", "state": null, "stream": "services/camera_proxy_stream/camera_4", "is_failed": false, "rank": 0, "disabled": false }, { "entity_id": "camera_2", "object_id": "AMC05723DA911E755D", "home": "api/services/home", "away": "api/services/away", "image": "services/camera_proxy/camera_2", "live_stream": "services/camera_proxy_stream/camera_2", "mode": null, "room_name": "Unassigned Devices", "state": null, "stream": "services/camera_proxy_stream/camera_2", "is_failed": true, "rank": 0, "disabled": false } ], . . .

CameraDetail.js

React.js

import React, { useState, useEffect, onClick} from 'react'; import axios from 'axios'; import Cookies from 'universal-cookie'; import { useSelector } from "react-redux"; import { useParams, Link, useHistory } from 'react-router-dom' import { useDispatch } from "react-redux"; import { setUserID } from "../stores/user"; const cookies = new Cookies(); const CameraDetail = () => { const history = useHistory(); const [camera, setCamera] = useState([]); const isLoggedIn= useSelector(state => state.user.isLoggedIn); const getDevices = async(data) => { await axios.get('https://xxx.com/devices', { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cookies.get('accesstoken')}` }, }) .then(result => { setCamera(result.data.attributes.camera); }) .catch(err => { console.log(err); }); } useEffect(() => { getDevices(); },[]); return ( <div className="container"> {isLoggedIn ? <div className="row mx-auto text-center"> <> ??????????? </> </div> : <div> <p> You should login</p> </div> } </div> ); } export default CameraDetail;

Default.js

React.js

import React from 'react'; import { Switch, Route } from 'react-router-dom'; import Top from './Top'; import Signup from './Signup'; import Login from './Login'; import DeviceList from './DeviceList'; import CameraDetail from './CameraDetail'; class Default extends React.Component { render() { return ( <div> <div className="main"> <Switch> <Route exact path="/" component={Top} /> <Route exact path="/signup" component={Signup} /> <Route exact path="/login" component={Login} /> <Route exact path="/device_list" component={DeviceList} /> <Route exact path="/camera_detail/" component={CameraDetail.js} /> <Route render={() => <p>not found!.</p>} /> </Switch> </div> </div> ); } } export default Default;

DeviceList.js

React.js

import React, { useState, useEffect, onClick} from 'react'; import axios from 'axios'; import Cookies from 'universal-cookie'; import { useSelector } from "react-redux"; import { useParams, Link, useHistory } from 'react-router-dom' import { useDispatch } from "react-redux"; import { setUserID } from "../stores/user"; const cookies = new Cookies(); const DeviceList = () => { const history = useHistory(); const [camera, setCamera] = useState([]); const {id} = useParams(); const isLoggedIn= useSelector(state => state.user.isLoggedIn); const userID= useSelector(state => state.user.userID); const getDevices = async(data) => { await axios.get('https://xxx.com/devices', { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cookies.get('accesstoken')}` }, }) .then(result => { setCamera(result.data.attributes.camera); }) .catch(err => { console.log(err); }); } useEffect(() => { getDevices(); },[]); return ( <div className="container"> <div className="row mx-auto"> <div className="col-md-4 mx-auto text-center"> {isLoggedIn ? <div> <p>Camera List</p> <div> {camera.map((item,i) => <div key={i}> <p>-------</p> <p>Entity Id: {item.entity_id}</p> <p>Object Id: {item.object_id}</p> <p>Home: {item.home}</p> <p>Away: {item.away}</p> <p>Image: {item.image}</p> <p>is_failed: {item.is_failed}</p> <p>Live Stream: {item.live_stream}</p> <p>Rank: {item.rank}</p> <p>Room Name: {item.room_name}</p> <p>State: {item.state}</p> </div> )} </div> </div> : <div> <p> You should login</p> </div> } </div> </div> </div> ); } export default DeviceList;

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。