JSON 嵌套和 React JS答案

【问题标题】：JSON nested and React JSJSON 嵌套和 React JS
【发布时间】：2018-07-25 10:51:37
【问题描述】：

我无法访问 json 嵌套数据。我应该如何访问包的起点和终点？我下面的代码不起作用。另外，我如何使按钮重定向，以便在单击它时以表格形式显示该货件的其余包裹信息？我不知道如何将按钮链接到特定货件。想法？

import React, { Component } from 'react';
import Navigation from './navigation';
import "./status.css";

export default function ViewStatusMenu (props) {

return (
  <div >
    <header  className="App-header">
      <h1 className="App-title2">Aid Tracker</h1>
      <Navigation/>
    </header>
    <div className="base">
      <h3> Shipments</h3>
      <ul className ="statusmenu">  {

        props.data.map(temp => {
           return (

             <div>

                <p>Shipment ID</p>
                <li className ="statuslist" temp={temp} key={temp.id}> {temp.id}</li>
                <p>Shipment name</p>
                <li className ="statuslist" temp={temp} key={temp.id}> {temp.name}</li>
                <p>No of packages</p>
                <li className ="statuslist" temp={temp} key={temp.id}> {temp.no_of_packs}</li>
                <p>Starting point</p>
                <li className ="statuslist" temp={temp} key={temp.id}> {temp.packages.starting_point}</li>
                <p>Starting point</p>
                <li className ="statuslist" temp={temp} key={temp.id}> {temp.packages.ending_point}</li>

                <button>View Shipment</button>

              </div>

            )
          }
        )
      }

      </ul>
    </div>
  </div>
);

}

JSON 数据

      [
        {
               "id": 112346,
               "name":"XYZ",
                "no_of_packs": "3",
                "packages":
                [

                { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}

        ]
      },
      {
         "id": 112346,
         "name":"XYZ",
         "no_of_packs": "3",
         "packages":

          [

                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}

          ]
        },
        {
          "id": 112346,
          "name":"XYZ",
          "no_of_packs": "3",
          "packages":

          [

                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"},
                        { "rnd": 112346, "starting_point": "Point C", "point_2": "2/07/17", "point_3": "2/07/17","ending_point": "2/07/17","Delivery_date": "5/05/18"}

          ]
        }
    ]

【问题讨论】：

标签： json reactjs web nested

【解决方案1】：

这应该会给你一个线索使用了你的数据，目前只显示ID，但可以显示所有数据。对于重定向，您需要创建另一个路由和组件来呈现新页面

const data = [{
    "id": 112346,
    "name": "XYZ",
    "no_of_packs": "3",
    "packages": [

      {
        "rnd": 112346,
        "starting_point": "Point C",
        "point_2": "2/07/17",
        "point_3": "2/07/17",
        "ending_point": "2/07/17",
        "Delivery_date": "5/05/18"
      },
      {
        "rnd": 112346,
        "starting_point": "Point C",
        "point_2": "2/07/17",
        "point_3": "2/07/17",
        "ending_point": "2/07/17",
        "Delivery_date": "5/05/18"
      },
      {
        "rnd": 112346,
        "starting_point": "Point C",
        "point_2": "2/07/17",
        "point_3": "2/07/17",
        "ending_point": "2/07/17",
        "Delivery_date": "5/05/18"
      },
      {
        "rnd": 112346,
        "starting_point": "Point C",
        "point_2": "2/07/17",
        "point_3": "2/07/17",
        "ending_point": "2/07/17",
        "Delivery_date": "5/05/18"
      }

    ]
  },
  {
    "id": 112346,
    "name": "XYZ",
    "no_of_packs": "3",
    "packages":

      [

        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        }

      ]
  },
  {
    "id": 112346,
    "name": "XYZ",
    "no_of_packs": "3",
    "packages":

      [

        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        },
        {
          "rnd": 112346,
          "starting_point": "Point C",
          "point_2": "2/07/17",
          "point_3": "2/07/17",
          "ending_point": "2/07/17",
          "Delivery_date": "5/05/18"
        }

      ]
  }
];



class App extends React.Component {
  redirectToItem = (item) => {
    // your redirect code goes here
  };

  renderItem = (item, index) => < li onClick = {
      () => this.redirectToItem(item)
    } >
    <
    span > {
      item.id
    } < /span> <
    /li>;

  render() {
    return <div >
      <
      h3 > Shipments < /h3> <
      ul className = "statusmenu" > {
        data.map(this.renderItem)
      } <
      /ul> <
      /div>
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：

我应该如何在该函数中重定向和使用项目？ @伊丹
使用history.push重定向
这是我第一次做 react。我不知道该怎么做。您能否详细说明或分享一个链接，让我可以了解这一点？ @伊丹
在这种情况下，我只会在同一页面中显示它。
感谢@Idal 的链接