ReactJS中如何在表格中展示嵌套JSON响应数据

嘿，我看了你的代码和数据，问题的核心其实出在LoadingPlan组件里——你没有利用传入的row参数来获取当前行的嵌套物品数据，反而重复请求了整个dispatch历史，这当然展示不出对应行的items啦！下面给你一步步梳理修改方案：

关键问题分析 #

• 你的LoadingPlan组件接收了row props，但完全没用到它，反而重新调用getDispatchHistory()获取全部数据，这就导致展开行时展示的是整个列表，而不是当前行的嵌套items
• 原代码里还有重复赋值setPlan(data); setPlan(plan);的冗余操作，以及useEffect依赖项设置错误的问题
• 部分表格字段和数据字段不匹配，导致基础数据也可能展示异常

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { Row, Col, Card, CardHeader, CardBody, Button } from 'reactstrap';
import DataTable from 'react-bootstrap-table-next';

const dispatchPlanColumns = [ 
  { dataField: "id", text: "ID", sort: true }, 
  { 
    dataField: "name", 
    text: "Truck", 
    sort: true, 
    isDummyField: true, 
    formatter: (cell, row) => ( 
      <span> {row.truck_type} {row.truck_name} </span> 
    ) 
  }, 
  { dataField: "total_trucks", text: "NO. of trucks", sort: true }, 
  { dataField: "weight", text: "Weight", sort: true }, 
  { dataField: "percent_filled", text: "Volume utilisation", sort: true }, 
  { 
    dataField: "origin", 
    text: "Route", 
    isDummyField: true, 
    formatter: (cell, row) => ( 
      <span> {row.origin} -> {row.destination} </span> 
    ) 
  }, 
  { dataField: "route_distance", text: "Route Distance", sort: true }, // 修正字段匹配：数据里是route_distance而非distance
  { dataField: "route_tat", text: "Date", sort: true }, 
  { dataField: "etd", text: "Dispatch Time", sort: true }, // 修正字段匹配：数据里是etd而非time
  { 
    dataField: "Action", 
    text: "Action", 
    sort: true, 
    formatter: (cell, row) => <Button color="primary">Raise RFQ</Button> 
  } 
];

const dispatchListColumns = [ 
  { dataField: "id", text: "SKU ID", sort: true }, 
  { dataField: "name", text: "Name", sort: true }, 
  { dataField: "quantity", text: "Quantity", sort: true }, 
  { dataField: "weight", text: "Weight", sort: true } 
];

// 重构LoadingPlan：直接使用传入的row的嵌套items数据
const LoadingPlan = ({ row }) => {
  // 加默认空数组，避免无items时报错
  const items = row.items || [];

  return ( 
    <div className={"animated slideInDown lightSpeedIn"} style={{ marginBottom: 60, marginTop: 20 }} > 
      <Row> 
        <Col lg={7}> 
          <DataTable columns={dispatchListColumns} data={items} /> 
        </Col> 
        <Col lg={4}> 
          <DispatchMapWrapper /> 
        </Col> 
      </Row> 
    </div> 
  ); 
};

const expandRow = row => <LoadingPlan row={row} />;

export default props => { 
  const [data, setData] = useState([]); 

  useEffect(() => { 
    const getNetwork = async () => { 
      const fetchedData = await getDispatchHistory(); 
      setData(fetchedData); 
    }; 
    getNetwork(); 
  }, []); // 依赖项设为空数组，仅挂载时请求一次数据

  return ( 
    <Row> 
      <Col lg={12}> 
        <Card> 
          <CardHeader> 
            <b>Dispatch Plan</b> 
          </CardHeader> 
          <CardBody> 
            <DataTable columns={dispatchPlanColumns} data={data} expandRow={{ renderer: expandRow }} /> 
          </CardBody> 
        </Card> 
      </Col> 
    </Row> 
  ); 
};

重点改动说明 #

1. 修复LoadingPlan组件逻辑：

   • 移除了不必要的useState和重复请求数据的useEffect，直接通过row.items获取当前行的嵌套物品数据
   • 给items设置默认空数组，避免部分行无items时出现渲染报错

2. 修正字段匹配问题：

   • 把原dispatchPlanColumns里的distance改为route_distance，time改为etd，确保和后端返回数据的字段完全对应

3. 优化主组件请求逻辑：

   • 去掉了重复赋值的冗余代码
   • 将useEffect的依赖项改为空数组，确保只在组件挂载时请求一次数据，避免不必要的重复请求

这样修改后，当你点击表格的展开按钮时，就能正确展示当前行对应的嵌套物品列表啦！

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