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

我正在尝试检查我的 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,
...

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

任何意见是极大的赞赏

编辑：发布了device.deviceData在 Redux Developer Tools 下找到的内容