Javascript React js:ErrorTypeError-Can'；未定义数组的t read属性

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

但是，调试器表示，

ErrorTypeError-无法正确读取未定义变量的属性，
控制台显示：

响应{type:“不透明”，url:，重定向：false，状态：0，确定：
false，statusText:，标头：标头，正文：null，bodyUsed:false}

ErrorTypeError：这是未定义的
如果有用，我还包括我桌面的屏幕截图：


下面是我正在使用的代码：

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>
        );
    }
}

感谢您为解决此问题指明了正确的方向。
使用
箭头
函数以组件引用/实例的形式访问
此
<代码>功能
有自己的功能，这会产生误导


fetch（url，fetchConfig）
。然后（（数据）=>{
控制台日志（数据）；
返回this.dummyData；//首先，如果希望通过
fetch
从返回响应，则需要调用
Body.json（）
以返回
响应流

fetch(url, fetchConfig)
  .then((data) => {
     return data.json();
  }).then((data) => {
     console.log(data);
     // do the rest here
  }); 

接下来，如果希望引用此
，则需要使用箭头函数

fetch(url, fetchConfig)
  .then((data) => {
    return this.dummyData;
  }).then((data) => {
     console.log(data);
     // do the rest here
  }); 

为dummyData创建状态

constructor(props) {
   super(props);
   this.state = {
     buttonEnabled: true,
     dummyData : [],   // Create state for dummyData
   };
this.updateRequest = this.updateRequest.bind(this);
}

然后从url中获取数据（我使用了
asyncwait
），并将其设置为dummyData

const request = async () => {
         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&l onmax=-58.95';

         const response = await fetch(url, fetchConfig);
         const json = await response.json();
         this.setState(dummyData : json);
    }        

    request();

这回答了你的问题吗？
const request = async () => {
         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&l onmax=-58.95';

         const response = await fetch(url, fetchConfig);
         const json = await response.json();
         this.setState(dummyData : json);
    }        

    request();