JSON嵌套并响应JS_Json_Reactjs_Web_Nested

JSON嵌套并响应JS

json reactjs web

JSON嵌套并响应JS,json,reactjs,web,nested,Json,Reactjs,Web,Nested,我让touble访问json嵌套数据。我应该如何访问包的起点和终点？我下面的代码不起作用。另外，我如何使按钮重定向，使其在单击时以表格形式显示该装运的其余包装信息？我不知道如何将按钮链接到特定的装运。想法 import React, { Component } from 'react'; import Navigation from './navigation'; import "./status.css"; export default function ViewStatusMenu (pr

我让touble访问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>
);

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

const数据=[{
“id”：112346，
“名称”：“XYZ”，
“无包装”：“3”，
“包”：[
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
}
]
},
{
“id”：112346，
“名称”：“XYZ”，
“无包装”：“3”，
“包”：
[
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
}
]
},
{
“id”：112346，
“名称”：“XYZ”，
“无包装”：“3”，
“包”：
[
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
},
{
“rnd”：112346，
“起点”：“C点”，
“第二点”：“2017年7月2日”，
“第三点”：“2017年7月2日”，
“结束点”：“2017年7月2日”，
“交付日期”：“2018年5月5日”
}
]
}
];
类应用程序扩展了React.Component{
redirectToItem=（项目）=>{
//你的重定向代码在这里
};
renderItem=（项目，索引）=>此.redirectToItem（项目）
} >
<
span>{
item.id
}<
/李>；
render（）{
返回
<
h3>出货量<
ul className=“状态菜单”>{
data.map（this.renderItem）
} <
/ul><
/div>
}
}
ReactDOM.render（，document.getElementById（'root'）

我应该如何准确地重定向和使用该函数中的项@Idanredirect using history.PUSH这是我第一次使用react。我不知道怎么做。你能详细说明或分享一个我可以了解的链接吗@在这种情况下，IdanI只会将其显示在同一页面上。谢谢@IdanI的链接
      [
        {
               "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"}

          ]
        }
    ]