javascript - react js : ErrorTypeError - Can't read property of undefined array

Question

在 API 请求后将船队的实时数据传递到表中之前，我想尝试注入(inject)样本数据，实际上我对它们进行了硬编码。目标是:如果我可以读取样本数据，那么几乎可以肯定 API 会将数据显示到我正在寻找的所有船只的表格中。

但是调试器说 ErrorTypeError - Can't read property of indefined variable正确和 Console说:

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }

ErrorTypeError: this is undefined如果这有用，我还包括我的桌面屏幕截图:



在我正在使用的代码下方:

import React, { Component } from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';

const resultArea = document.getElementById('result');
let out = '';

const fetchConfig = {
    method: 'GET',
    mode: 'no-cors'
};

const MapContainer = styled.div`
    // some components
`;

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true
        };
        this.updateRequest = this.updateRequest.bind(this);
    }

    updateRequest() {
        const url =
            'http://data.aishub.net/ws.php?username=My_KEY&format=1&output=json&compress=3&latmin=12.11&latmax=48.95&lonmin=-124.97&lonmax=-58.95';
        console.log(url);
        fetch(url, fetchConfig)
            .then(function(data) {
                console.log(data);
                return this.dummyData; // <-- Can't read this 
            })
            .then(function(jsonObject) {
                const boatData = JSON.parse(jsonObject);
                 for (boat in jsonObject) {
                    const boatInfo = [
                        // parsing data from the API after confirming with hardcoded dummyData
                     ];
                    boatOut(boatInfo);
                    console.log(boatInfo);
                 }
                resultArea.innerHTML = out;
            })
            .catch(function(e) {
                console.log('Error' + e);
            });
        this.setState({
            buttonEnabled: false
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }

    dummyData = [
        {
            ERROR: false,
            USERNAME: 'My_KEY',
            FORMAT: 'HUMAN',
            LATITUDE_MIN: 20.5,
            LATITUDE_MAX: 30.8,
            LONGITUDE_MIN: -15,
            LONGITUDE_MAX: 18.6,
            RECORDS: 14
        },
        [
            {
                MMSI: 566619000,
                TIME: '2020-01-25 19:51:38 GMT',
                LONGITUDE: -14.84344,
                LATITUDE: 28.282,
                COG: 15.7,
                SOG: 11.3,
                HEADING: 16,
                ROT: 0,
                NAVSTAT: 0,
                IMO: 9529504,
                NAME: 'NORD SUMMIT',
                CALLSIGN: 'S6RW5',
                TYPE: 70,
                A: 174,
                B: 26,
                C: 20,
                D: 12,
                DRAUGHT: 12.1,
                DEST: 'NO SAU',
                ETA: '02-02 12:00'
            },
            {
                MMSI: 236446000,
                TIME: '2020-01-25 19:51:28 GMT',
                LONGITUDE: -14.83202,
                LATITUDE: 28.64639,
                COG: 38,
                SOG: 12.1,
                HEADING: 38,
                ROT: 3,
                NAVSTAT: 0,
                IMO: 9291561,
                NAME: 'KEY BAY',
                CALLSIGN: 'ZDIJ4',
                TYPE: 83,
                A: 82,
                B: 18,
                C: 1,
                D: 19,
                DRAUGHT: 6.1,
                DEST: 'CASABLANCA',
                ETA: '01-27 15:00'
            }
        ]
    ];

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={11}
                    <button className="btn-next-request" onClick={() => this.updateRequest()}>
                        Time to Next API Request
                    </button>
                </GoogleMapReact>
            </div>
        );
    }
}

到目前为止我做了什么:

1)我试图解决直接作用于 dummyDaya 组件尝试手动解析它的问题。然而，API 已经给出了我包含在 updateRequest() 中的模板文件作为答案。功能。什么都没有显示。

2) 我不确定为什么在复制/粘贴两个数据的 API 答案时无法读取这两个容器的数据。从技术上讲，它应该毫无问题地注入(inject)。

3) 我现在正试图调查根据 official documentation 的可能性。 dummyData传递数据时不应该携带(也不知道我是否应该删除)请求的初始值。我指的是 dummyData 的以下部分大批:

dummyData = [
            {
                ERROR: false,
                USERNAME: 'My_KEY',
                FORMAT: 'HUMAN',
                LATITUDE_MIN: 20.5,
                LATITUDE_MAX: 30.8,
                LONGITUDE_MIN: -15,
                LONGITUDE_MAX: 18.6,
                RECORDS: 14
            },
[ …...

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

Answer 1

使用arrow访问this的函数作为组件引用/实例。 function有它自己的 this 这会误导

fetch(url, fetchConfig)
    .then((data) => {
        console.log(data);
        return this.dummyData; // <-- Can't read this 
    })

这同样适用于您的代码中的所有此类功能