ReactJS：如何解决 TypeError：variable.map 不是函数

Question

我最近一直有这个问题，我不知道如何解决它。我有两个应用程序同时运行。第一个是从vessel-finder 获取 API 并仅找到特定数量的船。 第二个应用程序是用于可视化获取数据的用户界面，特别是船只的纬度和经度。

错误如下

这是 API 的答案：

[  
    {  
        "AIS":{  
            "MMSI":227441980,
            "TIMESTAMP":"2017-08-11 11:17:37 UTC",
            "LATITUDE":46.1459,
            "LONGITUDE":-1.16631,
            "COURSE":360.0,
            "SPEED":0.0,
            "HEADING":511,
            "NAVSTAT":1,            
            "IMO":0,
            "NAME":"CLEMENTINE",
            "CALLSIGN":"FJVK",
            "TYPE":60,
            "A":0,
            "B":0,
            "C":0,
            "D":0,
            "DRAUGHT":0.0,
            "DESTINATION":"",
            "ETA_AIS":"00-00 00:00",
            "ETA":"",
            "SRC":"TER",
            "ZONE": "North Sea",
            "ECA": true      
        }
    }
]

这是我正在使用的代码，问题似乎出在哪里：

ShipTracker.js

import React from 'react';
import { Table } from 'reactstrap';

const shipCompanyMap = {
    MICHIGAN: 'DONJON',
    ATLANTIC SALVOR': 'DONJON',
    STUYVESANT: 'DUTRA'
};

const Ship = ({ ship, logoMap, logoClick }) => {
const shipName = ship.AIS.NAME;
const company = shipCompanyMap[shipName];
const img = logoMap[company && company.split(' ').join('').toUpperCase()];
return (
    <div onClick={(event) => logoClick(event, ship)}>
        {/* Render shipImage image */}
        <img src={img} alt="Logo" />
    </div>
);
};
export { Ship };

const ShipTracker = ({ ships, setActiveShip }) => {
console.log('These are the ships: ', { ships });

return (
    <div className="ship-tracker">
        <Table className="flags-table" responsive hover>
            <thead>
                <tr>
                    <th>#</th>
                    <th>MMSI</th>
                    <th>TIMESTAMP</th>
                    <th>LATITUDE</th>
                    <th>LONGITUDE</th>
                    <th>COURSE</th>
                    <th>SPEED</th>
                    <th>HEADING</th>
                    <th>NAVSTAT</th>
                    <th>IMO</th>
                    <th>NAME</th>
                    <th>CALLSIGN</th>
                </tr>
            </thead>
            <tbody>
                {ships.map((ship, index) => {
                    // const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                    // const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];

                    const {
                        MMSI,
                        TIMESTAMP,
                        LATITUDE,
                        LONGITUDE,
                        COURSE,
                        SPEED,
                        HEADING,
                        NAVSTAT,
                        IMO,
                        NAME,
                        CALLSIGN
                    } = ship;

                    const cells = [
                        MMSI,
                        TIMESTAMP,
                        LATITUDE,
                        LONGITUDE,
                        COURSE,
                        SPEED,
                        HEADING,
                        NAVSTAT,
                        IMO,
                        NAME,
                        CALLSIGN
                    ];

                    return (
                        <tr
                            onClick={() => setActiveShip(ship.AIS.NAME, ship.AIS.LATITUDE, ship.AIS.LONGITUDE)}
                            key={index}
                        >
                            <th scope="row">{index}</th>
                            {cells.map((cell) => <td key={ship.AIS.MMSI}>{cell}</td>)}
                        </tr>
                    );
                })}
            </tbody>
        </Table>
    </div>
);
};

export default ShipTracker;

GoogleMap.js 是我在 google-map 上渲染图像的地方：

render() {
    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'My_KEY' }}
                center={{
                    lat: this.props.activeShip ? this.props.activeShip.latitude : 37.99,
                    lng: this.props.activeShip ? this.props.activeShip.longitude : -97.31
                }}
                zoom={5.5}
            >

                {/* Rendering all the markers here */}
                {this.state.ships.map((ship) => (
                    <Ship
                        ship={ship}
                        key={ship.AIS.MMSI}
                        lat={ship.AIS.LATITUDE}
                        lng={ship.AIS.LONGITUDE}
                        logoMap={this.state.logoMap}
                        logoClick={this.handleMarkerClick}
                    />
                ))}
            </GoogleMapReact>
        </div>
    );
}

到目前为止我尝试了什么：

1) 我试图修改表格中单元格的传递/读取方式，希望同时修复variable.map is not a function 问题。在我尝试过的附加试用版下方，但也没有用：

const ShipTracker = ({ ships, setActiveShip }) => {
    console.log('These are the ships: ', { ships });

    return (
        <div className="ship-tracker">
            <Table className="flags-table" responsive hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>MMSI</th>
                        <th>TIMESTAMP</th>
                        <th>LATITUDE</th>
                        <th>LONGITUDE</th>
                        <th>COURSE</th>
                        <th>SPEED</th>
                        <th>HEADING</th>
                        <th>NAVSTAT</th>
                        <th>IMO</th>
                        <th>NAME</th>
                        <th>CALLSIGN</th>
                    </tr>
                </thead>
                <tbody>
                    {ships.map((ship, index) => {
                        // const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                        // const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];

                        // const {
                        //  MMSI,
                        //  TIMESTAMP,
                        //  LATITUDE,
                        //  LONGITUDE,
                        //  COURSE,
                        //  SPEED,
                        //  HEADING,
                        //  NAVSTAT,
                        //  IMO,
                        //  NAME,
                        //  CALLSIGN
                        // } = ship;

                        const cells = [
                            ship.AIS.MMSI,
                            ship.AIS.TIMESTAMP,
                            ship.AIS.LATITUDE,
                            ship.AIS.LONGITUDE,
                            ship.AIS.COURSE,
                            ship.AIS.SPEED,
                            ship.AIS.HEADING,
                            ship.AIS.NAVSTAT,
                            ship.AIS.IMO,
                            ship.AIS.NAME,
                            ship.AIS.CALLSIGN
                        ];

                        return (
                            <tr
                                onClick={() => setActiveShip(ship.AIS.NAME, ship.AIS.LATITUDE, ship.AIS.LONGITUDE)}
                                key={index}
                            >
                                <th scope="row">{index}</th>
                                {cells.map((cell) => <td key={ship.AIS.MMSI}>{cell}</td>)}
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );

2) 我也遇到过this source 和this other source、this one 和this too。

我读过this also。但是，这些都没有帮助我解决问题。

我做错了什么导致我无法正确编译项目？非常感谢您指出解决此问题的正确方向。

Answer 1

从您的代码中，typeof "ships" 并不清楚。 map 函数仅对数组进行操作。因此，在使用 map 函数之前，请检查 ship 是否为数组类型。

Answer 2

请检查您的结果，原型是否具有地图功能。

您可以通过检查该对象的 proto 属性来检查该结果的可用函数。

您可以在控制台中检查它，例如：-

let a = [1,2,3]

(3) [1, 2, 3]
0: 1
1: 2
2: 3
length: 3
__proto__: Array(0)
length: 0
constructor: ƒ Array()
concat: ƒ concat()
copyWithin: ƒ copyWithin()
fill: ƒ fill()
find: ƒ find()
findIndex: ƒ findIndex()
lastIndexOf: ƒ lastIndexOf()
pop: ƒ pop()
push: ƒ push()
reverse: ƒ reverse()
shift: ƒ shift()
unshift: ƒ unshift()
slice: ƒ slice()
sort: ƒ sort()
splice: ƒ splice()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
entries: ƒ entries()
values: ƒ values()
forEach: ƒ forEach()
filter: ƒ filter()
flat: ƒ flat()
flatMap: ƒ flatMap()
map: ƒ map()
every: ƒ every()
some: ƒ some()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()