用React钩子映射JSON数据

我正在做一个小项目，我正在尝试将JSON文件中的数据映射到我的项目中。 在具有嵌套数据的组件中，我不断得到一个

let data=props.data[“runways”]

data.json：
App.js，
我将JSON数据作为道具传递：

import planeData from './plane_info.json'


const Container = () => {

    const [planeDataState, setPlaneDataState] = useState({})
    const planeData = () => setPlaneDataState(planeData[0].runways)
    return (
           <>
            <MyPlane planeInfo={planeDataState}/>
            <button onClick={planeData} type="button">Get Data</button>
           </>
       )
}

从“./plane\u info.json”导入平面数据
常量容器=（）=>{
常量[planeDataState，setPlaneDataState]=useState（{}）
const planeData=（）=>setPlaneDataState（planeData[0]。跑道）
返回(
获取数据
)
}

最后，我想把我的数据带到我的组件中：

MyPlane.jsx
constmyplane=（道具）=>{
让data=props.data[“跑道”]；
如果（数据）
console.log（数据“aaa”）
返回(
{
数据(
{props.planeInfo.name}
轨道类型：{props.planeInfo.TYPE}
)：空的
}
);
}

根据错误消息，问题出现在这行代码中：
let data=props.data[“跑道”]我从未使用React钩子来传递数据，所以我对发生此错误的原因感到困惑。
开始时，props.data['runways']
中没有数据（您也可以使用
props.data.runways
，我猜您使用的语法来自另一种语言，如Python），因为您首先发送了请求，满足请求需要时间，所以您需要检查
组件以查看数据中是否有
跑道
键，然后继续渲染组件，如下所示：

const MyPlane = (props) => {
    const data = props.data
    return (
      <>
        {
          data.runways
            ? <>
                ...your render able items that you wrote before
              </>
            : <p>There is no data yet!</p>
        }
      </>
    )
}

为了能够使用您在
渲染部分之前定义的
数据
变量。
开始时，props.data['runways']
中没有数据（您也可以使用
props.data.runways
，我猜您使用的语法来自另一种语言，如Python），因为您首先发送了请求，满足请求需要时间，所以您需要检查
组件以查看数据中是否有
跑道
键，然后继续渲染组件，如下所示：

const MyPlane = (props) => {
    const data = props.data
    return (
      <>
        {
          data.runways
            ? <>
                ...your render able items that you wrote before
              </>
            : <p>There is no data yet!</p>
        }
      </>
    )
}

能够使用在
渲染
部分之前定义的
数据
变量。
此处
const planeData=（）=>setPlaneDataState（planeData[0].runways）

在这一行中，
planeData[0]。根据您共享的json文件，跑道将
未定义

而是尝试设置并传递整个json对象，即

constplanedata=（）=>setPlaneDataState（planeData）

试试这个，然后在
MyPlane.jsx
component中，
let data=props.data[“runways”]这不会是未定义的
。因此，错误不会出现。
此处
const planeData=（）=>setPlaneDataState（planeData[0].跑道）

在这一行中，
planeData[0]。根据您共享的json文件，跑道将
未定义

而是尝试设置并传递整个json对象，即

constplanedata=（）=>setPlaneDataState（planeData）

试试这个，然后在
MyPlane.jsx
component中，
let data=props.data[“runways”]这不会是未定义的
。因此，错误不会出现。
为了有效地映射JSON数据，有必要了解数据结构是如何组成的

如果您不确定，使用是一个很好的方法，可以获得“更大的画面”，然后确定您想要显示或传递给其他组件的道具到底是什么

您似乎希望获取平面数据（当前为2个平面的数组）。如果是这样，您可以首先获取该数组，设置状态，然后映射到该数组以显示相关信息。也许是这样的：


const数据={
“跑道”：[
{
“插槽”：“区域1”，
“飞机”：[
{
“名称”：“巴拿马”，
“编号”：“12345”，
“开始”：{
“时间”：1585129140
},
“结束”：{
“时间”：1585130100
}
},
{
“名称”：“PanAm 222”，
“编号”：“12345”，
“开始”：{
“时间”：1585129140
},
“结束”：{
“时间”：1585130100
}
}
]
}
]
}
函数App（）{
常量[planeData，setPlaneData]=React.useState（null）
React.useffect（（）=>{
setPlaneData（data.runways[0].planes）
}, [])
返回(
{/*{JSON.stringify（planeData）}*/}
{planeData&&planeData.map（p=>(

{p.name}{p.number}{p.start.time}{p.end.time}

))}
)
}
ReactDOM.render（，document.getElementById（'root'））
为了有效地映射JSON数据，有必要了解数据结构是如何组成的

如果您不确定，使用是一个很好的方法，可以获得“更大的画面”，然后确定您想要显示或传递给其他组件的道具到底是什么

您似乎希望获取平面数据（当前为2个平面的数组）。如果是这样，您可以首先获取该数组，设置状态，然后映射到该数组以显示相关信息。也许是这样的：


const数据={
“跑道”：[
{
“插槽”：“区域1”，
“飞机”：[
{
“名称”：“巴拿马”，
“编号”：“12345”，
“开始”：{
“时间”：1585129140
},
“结束”：{
“时间”：1585130100
const MyPlane = (props) => {
    const data = props.data
    return (
      <>
        {
          data.runways
            ? <>
                ...your render able items that you wrote before
              </>
            : <p>There is no data yet!</p>
        }
      </>
    )
}

const data = props.planInfo