开发者问题收集

使用 React Hooks 映射 JSON 数据

2020-04-02
6600
json reactjs

我正在开发一个小项目，并尝试将 JSON 文件中的数据映射到我的项目中。 在具有嵌套数据的组件中，我不断收到 let data = props.data["runways"]; 。

data.json： 

{
   "runways":[
      {
         "slot":"Area 1",
         "planes":[
            {
               "name":"PanAm",
               "number":"12345",
               "start":{
                  "time":1585129140
               },
               "end":{
                  "time":1585130100
               }
            },
            {
               "name":"PanAm 222 ",
               "number":"12345",
               "start":{
                  "time":1585129140
               },
               "end":{
                  "time":1585130100
               }
            }
         ]
      }
   ]
}

App.js，

我将 JSON 数据作为 props 传递： 

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

最后，我想将我的数据带入我的组件：

MyPlane.jsx 

const MyPlane = (props) => {
    let data = props.data["runways"];
    if(data)
        console.log(data, 'aaa')
        return (
            <>
                {
                    data ? (
                        <div>
                        <span>{props.planeInfo.name}</span>
                        <span>RAIL TYPE: {props.planeInfo.type}</span>
                        </div>
                    ) : <h6>Empty</h6>
                }
            </>
        );
}

根据错误消息，问题发生在这行代码中： let data = props.data["runways"]; 但是，我相信我正在从 JSON 文件中传递跑道的数据。 我从未使用过 React Hooks 来传递数据，所以我很困惑为什么会发生这个错误。

3个回答

为了有效地映射 JSON 数据，有必要了解该数据结构的组成方式。

如果您不确定，使用 JSON.stringify() 是一种很好的方法来获取“更大的图景”，然后决定您想要显示什么或作为 props 传递给其他组件。

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

const data = {
  "runways":[
     {
        "slot":"Area 1",
        "planes":[
           {
              "name":"PanAm",
              "number":"12345",
              "start":{
                 "time":1585129140
              },
              "end":{
                 "time":1585130100
              }
           },
           {
              "name":"PanAm 222 ",
              "number":"12345",
              "start":{
                 "time":1585129140
              },
              "end":{
                 "time":1585130100
              }
           }
        ]
     }
  ]
}

function App() {

  const [ planeData, setPlaneData ] = React.useState(null)

  React.useEffect(() => {
    setPlaneData(data.runways[0].planes)
  }, [])

  return (
    <div className="App">
      {/* {JSON.stringify(planeData)} */}
      {planeData && planeData.map(p => (
        <p key={p.name}>
          {p.name} | {p.number} | {p.start.time} | {p.end.time}
        </p>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
Juan Marco
2020-04-02

此处 const planeData = () => setPlaneDataState(planeData[0].runways)

在此行中，根据您共享的 json 文件， planeData[0].runways 将为 undefined 。

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

const planeData = () => setPlaneDataState(planeData)

尝试此操作，然后在 MyPlane.jsx 组件内， let data = props.data["runways"]; 这不会为 undefined 。因此，不会出现错误。

Puja Srivastava
2020-04-02

一开始 props.data['runways'] 中没有数据（您也可以使用 props.data.runways ，根据您使用的语法，我猜您来自 Python 等其他语言），因为您首先发送了请求，所以需要一些时间才能满足请求，因此您需要检查 <MyPlane /> 组件以查看数据中是否有 runways 键，然后继续渲染组件，如下所示： 

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

另请注意，您可能会从组件返回一些东西。在您的情况下，您的渲染是在 if(data){...} 语句内！如果条件不满足会怎样？这是您当前的错误情况！

注意： 请检查您是否将 planeDataState 作为 planeInfo prop 传递给子组件，因此您可能会有类似以下内容： 

const data = props.planInfo

能够使用您在 render 部分之前定义的 data 变量。

amdev
2020-04-02