ReactJS中组件传值至表格组件失败问题求助

问题分析 #

你的代码存在几个关键问题导致数据无法正确传递展示：

• selected保存的是设备ID，但devices是数组，用devices[selected]无法匹配到对应设备（数组按索引访问，而设备ID并非数组索引）
• Tables组件直接渲染props.data，没有提取timestamp和location字段
• handleChange中多余的e.preventDefault()会干扰下拉选择逻辑
• 初始状态selected未设置默认值，首次渲染会传递空值给Tables

修改后的Devdropdown.jsx #

import React, { useState, useEffect, useMemo } from "react";
import Tables from "./Tables";

const Devdropdown = () => {
  const [devices, setDevices] = useState([]);
  const [selected, setSelected] = useState("");
  const url = "http://localhost:3000/devices";

  useEffect(() => {
    async function getDevices() {
      const response = await fetch(url);
      const body = await response.json();
      setDevices(body.data);
    }
    getDevices();
  }, []);

  const handleChange = (e) => {
    setSelected(e.target.value);
  };

  const uniqueDeviceIds = useMemo(
    () => Array.from(new Set(devices.map((device) => device.device_id))),
    [devices]
  );

  // 根据选中的device_id筛选对应设备数据
  const selectedDevice = devices.find(device => device.device_id === selected);

  return (
    <div>
      <h1>Aircraft {selected}</h1>
      <select
        value={selected}
        onChange={handleChange}
      >
        <option value="">请选择设备</option>
        {uniqueDeviceIds.map((deviceId) => (
          <option key={deviceId} value={deviceId}>{deviceId}</option>
        ))}
      </select>
      {/* 只有选中设备后才渲染表格 */}
      {selected && <Tables data={selectedDevice} />}
    </div>
  );
};

export default Devdropdown;

修改后的Tables.jsx #

import React from "react";

const Tables = ({ data }) => {
  if (!data) return <div>请选择设备查看详情</div>;

  return (
    <div>
      <table border="1">
        <thead>
          <tr>
            <th>Timestamp</th>
            <th>Location</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{data.timestamp}</td>
            <td>{data.location}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default Tables;

关键修改说明 #

1. 数据匹配逻辑：用find方法根据选中的device_id从devices数组中筛选对应设备对象，替代原有的数组索引访问方式
2. 下拉框优化：添加默认空选项，避免初始状态下无选中值的问题；移除无效的placeholder属性（下拉框不支持该属性）
3. Tables组件增强：添加空数据判断，避免渲染错误；提取data.timestamp和data.location字段展示，添加表格边框提升可读性
4. 状态初始化优化：将devices初始状态设为空数组，selected设为空字符串，简化空值判断逻辑

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