Javascript 如何在ReactJS中将嵌套JSON响应中的数据显示到表中

这里的新手；我有一个表，其中显示了我从后端得到的简单JSON响应。但是，我无法显示每个项目的一些嵌套属性

我试过的 我不确定是否需要使用.map函数、运行循环或使用任何访问器。我有一个充满JSON响应的表，但它需要有另一行，每一行都显示正确的嵌套数据。 数据正在发送中。我想我无法解析它

我的代码 这些是一些路由信息，以及每个路由中嵌套项的信息。我无法显示项目的信息

---

根据您的代码，我发现了此问题：

const data=等待getDispatchHistory； const plan=等待getDispatchHistory； setPlandata； 设置平面图；

---

您正在获取和设置状态两次吗？这可能是问题所在吗？

我看到很多人都在看这个问题，但没有人愿意评论/试图提问？我问了一些太奇怪的问题吗？我正在尝试使用map函数来映射每一条路线及其附带的项目。我试过了，但它不起作用：const plan=data.mapement=>element.items；你的问题是信息太多。与其包含与当前问题相关的所有代码，不如构建一个最小的、可复制的示例。有关更多信息，请查看帮助中心的部分。这应该是任何人都可以轻松地运行来感受你的错误的东西。嗯。。。绝对没有想到提供太多的信息可能是不好的。好吧，我会尽量减少我的问题。你可能会有太多的信息，特别是如果你通过代码呈现这些信息的话。如果你不能用语言来解释它，你需要展示代码，那么创建一个最小的、可复制的例子就是最好的选择。这样，更多的人可以帮助你。谢谢你的回复。这是我这边出问题的原因之一。在使用延迟函数传递数据后，我能够解决这个问题。但是是的，错误是设置了两次状态

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: "distance",
    text: "Route Distance",
    sort: true
  },
  {
    dataField: "route_tat",
    text: "Date",
    sort: true
  },
  {
    dataField: "time",
    text: "Dispatch Time",
    sort: true
  },
  {
    dataField: "Action",
    text: "Action",
    sort: true,
    formatter: (row, cell) => <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
  }
];

const LoadingPlan = ({ row }) => {
  const [plan, setPlan] = useState([]);

  useEffect(() => {
    const getNetwork = async () => {
      const data = await getDispatchHistory();
      const plan = await getDispatchHistory();
      setPlan(data);
      setPlan(plan);
    };

    getNetwork();
  }, [setPlan]);

  return (
    <div
      className={"animated slideInDown lightSpeedIn"}
      style={{ marginBottom: 60, marginTop: 20 }}
    >
      <Row>
        <Col lg={7}>
          <DataTable columns={dispatchListColumns} data={plan} />
        </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 data = await getDispatchHistory();
      setData(data);
    };

    getNetwork();
  }, [setData]);

  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>
  );
};

let data = [
  {
    id: 11,
    truck_name: "20 ft sxl 7 Ton",
    truck_type: "Container",
    items: [
      {
        id: "10",
        name: "Coupling",
        pid: 6,
        quantity: 2,
        length: 5.0,
        width: 4.0,
        height: 3.0,
        volume: 60.0,
        weight: 650.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-09-20T12:00:00",
        destination: "Gaya",
        time: "2019-08-01T17:09:06.106859",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      }
    ],
    comments: "Autogenerated",
    origin: "Delhi",
    destination: "Gaya",
    total_trucks: 1,
    material_type: "Non-Fragile",
    scheduled_date: "2019-09-20T12:00:00",
    offered_price: 0,
    weight: 6500,
    status: "Hold",
    created_on: "2019-08-13T10:06:40.761801",
    route_distance: 1088.821,
    route_tat: "19 Hours 27 Minutes",
    etd: "2019-08-15T14:39:32.261802",
    eta: "2019-09-20T12:00:00",
    route_link:
      "https://www.google.com/maps/embed/v1/directions?&key=AIzaSyBa6popp4h4-uNP98vV_-qhI9-GdHg1uQ8&origin=Delhi&destination=Gaya&mode=driving&language=en",
    percent_filled: "92.85714285714286",
    owner: 1
  },
  {
    id: 12,
    truck_name: "20 ft sxl 6 Ton",
    truck_type: "Container",
    items: [
      {
        id: "7",
        name: "Cover Shaft",
        pid: 3,
        quantity: 2,
        length: 3.0,
        width: 3.0,
        height: 4.0,
        volume: 36.0,
        weight: 500.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-08-10T12:00:00",
        destination: "Kalyan-Dombivli",
        time: "2019-08-01T17:09:05.898876",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      },
      {
        id: "7",
        name: "Cover Shaft",
        pid: 3,
        quantity: 2,
        length: 3.0,
        width: 3.0,
        height: 4.0,
        volume: 36.0,
        weight: 500.0,
        truck_type: "Container",
        origin: "Delhi",
        date: "2019-08-10T12:00:00",
        destination: "Kalyan-Dombivli",
        time: "2019-08-01T17:09:05.898876",
        rtd: false,
        is_dispatched: false,
        uploaded_by: 1
      }
    ]
  }
];