Pracuję nad małym projektem i próbuję zmapować dane z pliku JSON do mojego projektu. W komponentach z zagnieżdżonymi danymi ciągle otrzymuję 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,

Dane JSON przekazuję jako rekwizyty:

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

I na koniec chcę przenieść moje dane do mojego komponentu:

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

Zgodnie z komunikatem o błędzie problem występuje w tym wierszu kodu: let data = props.data["runways"]; Uważam jednak, że przekazuję dane dla pasów startowych z pliku JSON. Nigdy nie pracowałem z React hookami przy przekazywaniu danych, więc jestem zdezorientowany, dlaczego ten błąd występuje.

1
Noble Polygon 2 kwiecień 2020, 17:23

3 odpowiedzi

Najlepsza odpowiedź

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

W tym wierszu planeData[0].runways będzie undefined zgodnie z udostępnionym plikiem json.

Zamiast tego spróbuj ustawić i przekazać cały obiekt json, tj.

const planeData = () => setPlaneDataState(planeData)

Spróbuj tego, a potem wewnątrz komponentu MyPlane.jsx let data = props.data["runways"]; to nie będzie undefined. Więc błąd nie nadejdzie.

1
Puja Srivastava 2 kwiecień 2020, 14:37

Aby efektywnie mapować dane JSON, konieczne jest zrozumienie, jak składa się ta struktura danych.

Jeśli nie masz pewności, użyj {{X0 }} to świetny sposób, aby uzyskać „większy obraz”, a następnie zdecydować, co dokładnie chcesz wyświetlić lub przekazać jako rekwizyty innym komponentom.

Wygląda na to, że chcesz uzyskać dane samolotu (obecnie jest to tablica 2 płaszczyzn). Jeśli tak, możesz najpierw pobrać tę tablicę, ustawić stan, a następnie zmapować ją, aby wyświetlić odpowiednie informacje. Może tak:

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>
1
Juan Marco 2 kwiecień 2020, 14:58

Na początku nie ma danych w props.data['runways'] (możesz również użyć props.data.runways, myślę, że pochodzisz z innego języka, takiego jak Python, od tej składni, której używasz), ponieważ najpierw wysłałeś żądanie , spełnienie żądania zajmuje trochę czasu, więc musisz sprawdzić w swoim komponencie <MyPlane />, czy w danych jest klucz runways, a następnie przystąpić do renderowania komponentu, jak poniżej:

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

Pamiętaj również, że możesz zwrócić coś z komponentu. W twoim przypadku renderowanie znajduje się wewnątrz instrukcji if(data){...}! co się stanie, jeśli warunek nie zostanie spełniony? który jest twoim aktualnym przypadkiem błędu!

UWAGA: sprawdź, czy przekazujesz swój planeDataState jako planeInfo elementowi podrzędnemu, więc możesz mieć coś takiego:

const data = props.planInfo

Aby móc użyć zmiennej data, którą zdefiniowałeś przed częścią render.

0
halfer 15 kwiecień 2020, 16:09