ReactJS：TypeError：无法读取未定义的属性“纬度”

Posted 2023-03-23

【中文标题】ReactJS：TypeError：无法读取未定义的属性“纬度”

【英文标题】：ReactJS: TypeError: Cannot read property 'latitude' of undefined

【发布时间】：2021-06-15 18:23:06

【问题描述】：

我正在尝试检查我的 SQL 数据库中是否存在 latitude 和 longitude，因为目前当它们未定义时，它会在加载时将我的 Web 应用程序留空，并出现以下错误 TypeError: Cannot read property 'latitude' of undefined

我的代码原来是

  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
  )

device.deviceData 在 SQL 中从我的表中提取数据。

我调整它以确保 SQL 中的数组长度大于 0，但这对 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,
...

我已经尝试使用 console.log 来确保长度确实为 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,
...

其他尝试过的修复：

  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,
...

但以上所有内容的格式都有错误，所以我不确定它们是否是我只是语法错误的可行选项。

非常感谢任何建议

编辑：发布了在 Redux 开发者工具下找到的 device.deviceData 的内容

【问题讨论】：

device.deviceData的内容是什么？

在检查一个答案中提到的属性之前，最好使用链接并检查每个对象（如果它已定义/具有一定长度等）。 console.log(device.deviceData) 并告诉我们它显示的内容。

const [viewport, setViewport] = useState => console.log(device.deviceData.length)。你所有的例子都使用了不正确的语法。你没有得到一个不同的错误。

@AlumnoCabreado 刚刚添加了内容截图

@Henrik 您是否尝试检查zoom:Number(device.deviceData.lenght>0 ? device.deviceData.lenght[0].latitude : 0) ? 10 : 1 中的 deviceData 长度？

【参考方案1】：

查看错误TypeError: Cannot read property 'latitude' of undefined。我的猜测是device.deviceData 的值是undefined。

所以，如果 deviceData 字段存在于设备中，请使用console.log(device) 进行验证。

而且，要解决上述问题，您可以尝试

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

带有可选链接的更简洁的语法是：

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

【讨论】：

cconsole.log(device) 显示其他字段（在我刚刚截屏的 Redux 开发人员工具中也可以看到），但 device.deviceData 是一个空数组/未定义

这似乎成功了！该页面仍为空白，但控制台显示不相关的错误。谢谢！