javascript - (节点:28917) UnhandledPromiseRejectionWarning: TypeError: data is not iterable

Question

我正在尝试使用 vessel finder API 获取 API 。在获得我从 API 中决定的固定且预定义的容器列表后，我想将它们注入(inject)到表中。然而，一旦我启动应用程序，我就会收到错误(node:28917) UnhandledPromiseRejectionWarning: TypeError: data is not iterable。我不知道为什么会发生这种情况。我分别启动一个获取 API 的应用程序和另一个接口(interface)端的应用程序。

下面是其 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      
        }
    }
]

在我用来在终端上启动 API 请求的代码下面:npm start

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 { data } = await axios.get(
        'https://api.vesselfinder.com/vesselslist?userkey=KEY'
    );
    const [ metaData, ships ] = data;
    res.send(data);
    return;
});

module.exports = router;

在我在另一个终端中启动的第二个应用程序下面:npm start

ShipTracker.js

const shipCompanyMap = {
    MICHIGAN: 'DONJON',
    MAGDALEN: 'WEEKS',
    MURDEN: 'USACE'
};

const Ship = ({ ship, logoMap, logoClick }) => {
    const shipName = ship.AIS.NAME;
    const company = shipCompanyMap[shipName];
    const img = logoMap[company];
    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 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>
    );
};

export default ShipTracker;

GoogleMap.js

import { Ship } from '../components/ShipTracker';


handleMarkerClick = (event, data) => {
    this.props.setActiveShip(data.AIS.NAME, data.AIS.LATITUDE, data.AIS.LONGITUDE);
};

render() {
    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: '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>
    );
}
}



export default class GoogleMap extends React.Component {
    state = {
        ships: [],
        activeShipTypes: [],
        activeCompanies: [],
        activeShip: null
    };
async componentDidMount() {
    const url = 'http://localhost:3001/hello';
    console.log(url);
    const fetchingData = await fetch(url);
    const ships = await fetchingData.json();

    console.log(ships);

    this.setState({
        ships
    });
}

render() {
    return (
        <MapContainer>
            <pre>{JSON.stringify(this.state.activeShip, null, 2)}</pre>

            <BoatMap
                setActiveShip={this.setActiveShip}
                activeShip={this.state.activeShip}
            />
            <ShipTracker
                ships={this.state.ships}
                setActiveShip={this.setActiveShip}
                onMarkerClick={this.handleMarkerClick}
            />
        </MapContainer>
    );
}

}

我使用过但没有帮助我解决问题的帖子是:this one ,

I also used this和 this source .

请就如何继续前进提出建议，因为我已经没有想法了，也不知道如何继续前进。

Answer 1

您在这一行遇到了问题，该错误可以帮助您认识到这是错误的:

 const [ metaData, ships ] = data;

你会发现data是不可迭代的。这意味着当您尝试解构数据以获取内部值时，data 并不是您所期望的数组。在您的情况下，它的值可能是 undefined ，当尝试解构它时，您会收到 TypeError: data is not iterable 错误，然后抛出 UnhandledPromiseRejectionWarning因为您没有将调用包围在 try/catch 范围内。因此，您需要仔细检查您正在调用的电话:

const { data } = await axios.get('https://api.vesselfinder.com/vesselslist?userkey=KEY');

我建议您通过解构来检索数据、保存整个响应并通过调试(或使用 console.log)来开始调试它，以查看是否获得有效的响应以及还像这样包围端点的代码:

router.get('/hello', async function(req, res, next) {
  try {
    const { data } = await axios.get('https://api.vesselfinder.com/vesselslist?userkey=KEY');
    const [ metaData, ships ] = data;
    res.send(data);
  } catch (error) {
    res.send(error); // You will later would need to manage the error sent where you make the API call from your React code.
  }
});