如何在React中实现家电设备列表到摄像头详情页的跳转与展示

问题背景 #

开发网页端家电控制系统，后端已完成开发，React端已实现设备列表展示页面，但点击列表中的摄像头设备时，无法在详情页展示对应设备的专属信息，需要完成点击跳转+单设备详情展示的功能。

可获取的摄像头API数据示例：

{
  "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
      },
      // 其他摄像头数据...
    ]
  }
}

步骤1：修正路由配置（Default.js） #

给详情页路由添加参数占位符用于传递摄像头的entity_id，同时修复组件引用的语法错误。

修改后的代码：

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/:entity_id" component={CameraDetail} />
                      <Route render={() => <p>not found!.</p>} />
                  </Switch>
              </div>
            </div>
        );
    }
}
export default Default;

步骤2：给DeviceList.js添加跳转链接 #

在每个摄像头条目上添加跳转链接，点击时携带该设备的entity_id参数跳转到详情页。

修改后的关键代码片段：

// ...其他代码保持不变
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>
                    {/* 添加跳转链接，传递当前摄像头的entity_id */}
                    <Link to={`/camera_detail/${item.entity_id}`}>
                      <h4>查看 {item.entity_id} 详情</h4>
                    </Link>
                    <p>Entity Id: {item.entity_id}</p>
                    <p>Object Id: {item.object_id}</p>
                    <p>Room Name: {item.room_name}</p>
                    <p>is_failed: {item.is_failed.toString()}</p>
                    <p>State: {item.state || 'N/A'}</p>
                    {/* 其他原有展示内容 */}
                  </div>
                )}
          </div>
      </div>
      :
      <div>
          <p> You should login</p>
      </div>
      }
      </div>
    </div>
  </div>
);

步骤3：修改CameraDetail.js获取并展示单个摄像头信息 #

通过路由参数获取entity_id，从接口返回的列表中筛选出对应设备并展示。

修改后的完整代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useSelector } from "react-redux";
import { useParams, Link } from 'react-router-dom'

const cookies = new Cookies();

const CameraDetail = () => {
  // 获取路由中的entity_id参数
  const { entity_id } = useParams();
  const [camera, setCamera] = useState(null);
  const isLoggedIn= useSelector(state => state.user.isLoggedIn);

const getDevices = async() => {
  await axios.get('example.com/devices',
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      // 筛选出当前entity_id对应的摄像头
      const targetCamera = result.data.attributes.camera.find(item => item.entity_id === entity_id);
      setCamera(targetCamera);
    })
    .catch(err => {
      console.log(err);
    });
}

useEffect(() => {
  if (isLoggedIn) {
    getDevices();
  }
},[isLoggedIn, entity_id]); // 当entity_id变化时重新获取数据


  return (
    <div className="container">
      {isLoggedIn ? 
      <div className="row mx-auto text-center">
        {camera ? (
          <>
            <Link to="/device_list">返回设备列表</Link>
            <h2>摄像头详情: {camera.entity_id}</h2>
            <p>-------</p>
            <p>Object Id: {camera.object_id}</p>
            <p>所属房间: {camera.room_name}</p>
            <p>状态: {camera.state || '未设置'}</p>
            <p>是否异常: {camera.is_failed ? '是' : '否'}</p>
            <p>实时流地址: {camera.live_stream}</p>
            {/* 展示摄像头快照（非异常状态下） */}
            {!camera.is_failed && (
              <img src={`/${camera.image}`} alt={`${camera.entity_id} 快照`} style={{maxWidth: '100%', marginTop: '20px'}} />
            )}
          </>
        ) : (
          <p>加载中...</p>
        )}
      </div>
      :
      <div>
          <p>请先登录</p>
      </div>
      }
    </div>
  );
}
export default CameraDetail;

额外优化建议 #

如果后端支持单个摄像头的独立查询接口（例如example.com/devices/camera/:entity_id），建议在CameraDetail.js中直接请求该接口，减少不必要的数据传输，提升页面加载性能。

内容的提问来源于stack exchange，提问作者user15346124