CODEWITHSUNDEEP
javascriptsqlreactjs
Henrik
Henrik

Reputation: 301

ReactJS: TypeError: Cannot read property 'latitude' of undefined

I am trying to check if latitude and longitude exist in my SQL database, as currently when they are undefined, it leaves my web app blank on load with the following error TypeError: Cannot read property 'latitude' of undefined

My code was originally

  const [viewport, setViewport] = useState({
    //If we know where the first device is, use that to center map ELSE just show the whole world map and let user navigate to them
    latitude: Number(device.deviceData[0].latitude) ?  Number(device.deviceData[0].latitude): 38.2700 ,
    longitude: Number(device.deviceData[0].longitude) ? Number(device.deviceData[0].longitude) : 100.8603,
    width:"80vw",
    height:"80vh",
    zoom:Number(device.deviceData[0].latitude) ? 10 : 1
  })

Where device.deviceData is pulling data from my table in SQL.

I adjusted it to make sure the length of the array from SQL was greater than 0, but this made no difference to the TypeError

  const [viewport, setViewport] = useState ({
    latitude: device.deviceData.length > 0 ?  Number(device.deviceData[0].latitude): 38.2700 ,
    longitude: device.deviceData.length > 0 ? Number(device.deviceData[0].longitude) : 100.8603,
...

and I've tried using console.log to make sure the length is really 0

  const [viewport, setViewport] = useState => console.log(device.deviceData.length) ({
    latitude: device.deviceData.length > 0 ?  Number(device.deviceData[0].latitude): 38.2700 ,
    longitude: device.deviceData.length > 0 ? Number(device.deviceData[0].longitude) : 100.8603,
...

Other tried fixes:

  const [viewport, setViewport] = useState => console.log(device.deviceData.length) ({
    if (Number(device.deviceData[0].latitude)) {
      latitude: Number(device.deviceData[0].latitude) ?  Number(device.deviceData[0].latitude): 38.2700 ,
      longitude: Number(device.deviceData[0].longitude) ? Number(device.deviceData[0].longitude) : 100.8603,
...

  const [viewport, setViewport] = useState => console.log(device.deviceData.length) ({
    if (Number(device.deviceData[0].latitude) != null) {
      latitude: Number(device.deviceData[0].latitude) > 0 ?  Number(device.deviceData[0].latitude): 38.2700 ,
      longitude: Number(device.deviceData[0].longitude) > 0 ? Number(device.deviceData[0].longitude) : 100.8603,
...

  const [viewport, setViewport] = useState => console.log(device.deviceData.length) ({
    "latitude" in device.deviceData[0] {
      latitude: Number(device.deviceData[0].latitude) > 0 ?  Number(device.deviceData[0].latitude): 38.2700 ,
      longitude: Number(device.deviceData[0].longitude) > 0 ? Number(device.deviceData[0].longitude) : 100.8603,
...

But all of the above have had errors with the formatting, so I am not sure if they are viable options that I have simply gotten the syntax wrong to.

Any advice is greatly appreciated

EDIT: Posted the content of device.deviceData found under Redux Developer Tools

enter image description here

Upvotes: 0

Views: 304

Answers (1)

sminmgr
sminmgr

Reputation: 342

Looking at error TypeError: Cannot read property 'latitude' of undefined. My guess is value of device.deviceData is undefined.

So,Please do verify with console.log(device) if deviceData field exists in device.

And, to fix above issue you can try

device.deviceData && device.deviceData.lenght>0 && device.deviceData[0].latitude 
? Number(device.deviceData[0].latitude): 38.2700

Much more cleaner syntax with optional chaining would be:

Number(device?.deviceData?.[0]?.latitude || 38.2700)

Upvotes: 1

Related Questions