ReactJS抛出“ TypeError：无法读取未定义的属性” latLng”

Question

我使用此API制作了船用可视仪。在查询API之后，我可以通过我感兴趣的容器获得json响应，并将这些API信息写入MongoDB数据库。

问题：一切似乎都运行良好，但是突然，应用程序停止工作，并在下面抛出一个奇怪的错误。现在我研究了很多可能的原因：

TypeError: Cannot read property 'latLng' of undefined

我不了解的错误是它指向我没有的属性：latLng，并且我仅在节点模块{{1 }}

在我的代码中我没有node_modules/react/cjs/react.development.js:1149，但是我有latLng（注意小写的“ l”），我在下面的代码中latlng上显示了它

为了完整性，我还打印了一个屏幕。输出带有async updateRequest() { ... }和感兴趣的代码部分的奇怪输出 错误的最后一部分是我的代码node_modules/react/cjs/react.development.js:1149：

服务器

BoatMap.updateRequest

客户

var express = require('express');
var router = express.Router();
var axios = require('axios');
const NodeCache = require('node-cache');
const myCache = new NodeCache();

let hitCount = 0;

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

router.get('/hello', async function(req, res, next) {
    const allData = myCache.get('allData');

    if (!allData) {
        hitCount++;
        try {
            const { data } = await axios.get(
                'https://api.vesselfinder.com/vesselslist?userkey=KEY'
            );
            const { metaData, ships } = data;
            myCache.set('allData', data, 70);
            console.log(data + 'This is the data');
            res.send(data);
        } catch (error) {
            res.send(error);
            console.log(error);
        }
    }
    res.send(allData);
});

module.exports = router;

我到目前为止所做的事情：

1）我也遇到this source来帮助我解决问题，但是没有运气。

2）我也咨询了this other source和this one，但是他们两个都没有帮助我找出问题所在。

3）我对问题进行了深入研究，发现了this source too。

4）我读了this one too。但是，这些都没有帮助我解决问题。

5）我还发现this source非常有用，但仍然没有解决办法。

感谢您指出解决此问题的正确方向。

Answer 1

我发现了与Google-map-react相关的同一问题here。

查看您的代码，您的后备是纯字符串（在GoogleMapReact组件内部），当它应该是组件时，这会导致错误。

编辑：您的组件GoogleMapReact看上去也没有关闭（可能粘贴了代码）

我将使用&&运算符，例如：

 { this.state.mapLoaded && (
                    <div>
                        <Polyline
                            map={this.map}
                            maps={this.maps}
                            markers={this.state.trajectoryData}
                            lineColor={this.state.trajectoryColor}
                        />
                    </div>) 
}

对于<Ship>逻辑，我会先包装<div>Loading...</div>，但是我猜google-map-react可能不接受。如果没有，我将对&&使用相同的方法。