Fatal编程技术网
  • javascript/
  • Javascript （节点：28917）未处理的PromisejectionWarning:TypeError:数据不可编辑

Javascript （节点：28917）未处理的PromisejectionWarning:TypeError:数据不可编辑

javascript reactjs

Javascript （节点：28917）未处理的PromisejectionWarning:TypeError:数据不可编辑,javascript,reactjs,Javascript,Reactjs,我正在尝试使用获取API。在获得了一个固定的预定义的容器列表后，我从API中决定，我想将它们注入一个表中。 但是，一旦启动应用程序，我就会收到一个未处理的错误（节点：28917）PromisejectionWarning:TypeError:数据不可编辑。我不知道为什么会这样。 我将分别启动一个获取API的应用程序和另一个接口端应用程序 以下是其API的典型API响应： [ { "AIS":{ "MMSI":227441980,

我正在尝试使用获取API。在获得了一个固定的预定义的容器列表后，我从API中决定，我想将它们注入一个表中。 但是，一旦启动应用程序，我就会收到一个未处理的错误
（节点：28917）PromisejectionWarning:TypeError:数据不可编辑
。我不知道为什么会这样。 我将分别启动一个获取API的应用程序和另一个接口端应用程序

以下是其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

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

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

const shipCompanyMap={
密歇根州：“东戎”，
玛格达伦：“几周”，
默登：“美国空军”
};
常量Ship=（{Ship，logoMap，logoClick}）=>{
const shipName=ship.AIS.NAME；
const company=船舶公司映射[船舶名称]；
const img=logoMap[公司]；
返回(
logoClick（事件、发货）}>
{/*渲染shipImage图像*/}
);
};
出口{Ship}；
const ShipTracker=（{ships，setActiveShip}）=>{
log（'这些是ships:'，{ships}）；
返回(
#
MMSI
时间戳
纬度
经度
课程
速度
标题
导航器
依我所见
名称
呼号
{ships.map（（ship，index）=>{
常量单元格=[
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}）
);
})}
);
};
导出默认ShipTracker；
GoogleMap.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;

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

从“../components/ShipTracker”导入{Ship}；
handleMarkerClick=（事件、数据）=>{
this.props.setActiveShip（data.AIS.NAME、data.AIS.LATITUDE、data.AIS.LONGITUDE）；
};
render（）{
返回(
{/*在此处呈现所有标记*/}
{this.state.ships.map（（ship）=>(
))}
);
}
}
导出默认类GoogleMap扩展React.Component{
状态={
船舶：[]，
activeShipTypes:[]，
活动公司：[]，
活动船舶：空
};
异步组件didmount（）{
常量url=http://localhost:3001/hello';
console.log（url）；
const fetchingData=等待获取（url）；
const ships=await fetchingData.json（）；
控制台.日志（船舶）；
这是我的国家({
船舶
});
}
render（）{
返回(
{JSON.stringify（this.state.activeShip，null，2）}
);
}
}

我用过但没有帮我解决问题的帖子有：

和

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

您在这一行中遇到了问题，错误帮助您意识到这是错误的：

const { data } = await axios.get('https://api.vesselfinder.com/vesselslist?userkey=KEY');
您会发现
数据
不可编辑。这意味着
数据
不是一个数组，当您试图对其进行分解以获取内部值时，它不是一个数组。在您的情况下，它的值可能是
undefined
，当尝试对其进行分解时，您会得到
TypeError:data is not iterable
错误，然后抛出
unhandledPromisejectionWarning
，因为您没有在
try/catch
范围内包围您的调用。因此，您需要仔细查看您正在拨打的电话：

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.
  }
});
我建议您开始调试它，而不是通过解构来检索数据，保存整个响应，并通过调试（或使用
console.log
）来查看您是否得到了有效的响应，以及围绕端点的代码，如下所示：

const[metaData，ships]=数据数据从哪里来？@Brianthonpson，谢谢你阅读这个问题。很抱歉，这是一个复制/粘贴问题，线路丢失。代码已经更新了，感谢您捕捉到这一点，但这不是问题所在。只是我这边的一个愚蠢的错误。：）如果控制台记录
数据
，你会得到什么？我几乎得到了我要找的所有SIP。问题是
ShipTracker.js
中的数组似乎是空的，我不知道为什么，因为从获取中得到的答案似乎是正确的。基本上，从
ShipTracker.js
得到的是一个空数组
console.log（'这些是船：'，{ships}）非常感谢您阅读此问题。我现在得去赶公共汽车，我一到家就回来接你！谢谢，我尝试了你的解决方案，它可以编译。然而，它引发了另一个错误。若你们有时间的话，我会用我所拥有的发布另一个。T