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

我最近一直有这个问题，我不知道如何解决它。我有两个应用程序同时运行。第一个是从中获取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;

到目前为止我所尝试的：

1） 我试图修改表中单元格的传递/读取方式，希望同时解决

variable.map不是函数的问题。下面是我尝试的附加试验，但也不起作用：

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

const ShipTracker=（{ships，setActiveShip}）=>{
log（'这些是ships:'，{ships}）；
返回(
#
MMSI
时间戳
纬度
经度
课程
速度
标题
导航器
依我所见
名称
呼号
{ships.map（（ship，index）=>{
//常量{IMO，名称，呼号，航向，SOG，MMSI，经度，纬度}=船舶；
//常量单元格=[名称、呼号、标题、SOG、IMO、MMSI、经度、纬度]；
//常数{
//MMSI，
//时间戳，
//纬度，
//经度，
//当然，
//速度，
//标题，
//NAVSTAT，
//国际海事组织，
//名字，
//呼号
//船舶；
常量单元格=[
ship.AIS.MMSI，
ship.AIS.TIMESTAMP，
ship.AIS.LATITUDE，
ship.AIS.LONGITUDE，
船舶航向，
船速，
船舶航向，
ship.AIS.NAVSTAT，
ship.AIS.IMO，
ship.AIS.NAME，
ship.AIS.CALLSIGN
];
返回(
setActiveShip（ship.AIS.NAME、ship.AIS.LATITUDE、ship.AIS.LONGITUDE）}
键={index}
>
{index}
{cells.map（（cell）=>{cell}）
);
})}
);

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__()

从你的代码中，不清楚“船”的类型。
map函数仅在数组上运行。因此，在船舶上使用地图功能之前，请检查船舶是否为数组类型。
感谢阅读此问题。我检查了一下，看到的是一个打印屏幕。数组似乎是空的。你能在你的屏幕截图中看到这是一个对象吗，因此你需要使用结果['ships']，而对象在其原型中没有映射功能。谢谢你的评论。我该如何解决这个问题？你能给你的答案添加一些代码吗？这样我就可以看到我发布的代码中的补丁了？那将非常有帮助！：）只需在代码中使用result['ships'，它就可以修复。对不起：）我应该怎么做？谢谢你阅读这个问题。我该怎么做？奇怪的是，只要我启动应用程序（ui）一秒钟，我就会看到所有东西，然后它就崩溃了。在文件GoogleMap.js中，在render funtcion中，添加一条语句
console.log（“ships”，this.state.ships）注释组件GoogleMapReactOk以解决其他错误。我每分钟提出的请求太多了，而且已经超时了。谢谢！：）但是，我仍然有来自
ShipTracke.js
的相同错误
console.log（'这些是ships:'，{ships}）
仍然返回一个空数组，你可以看到在
google map
下的表中没有填充行，尽管我得到了所有的船只。另外，我不知道为什么ShipTracker.js文件似乎不接受某些东西。是因为我误解了我在问题开始时编写的API响应吗？
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__()