Javascript 将提取调用的返回数据映射到导致错误的状态
我试图使用对JSON.server的直接获取来检索基本包以加载一些简单组件。当我在Firefox中运行这个脚本时。尝试获取资源时出现网络错误,但在网络连接本身中找不到任何400个错误。我的问题是,什么会导致这种崩溃?因为调用时页面的其余部分加载良好 编辑1:具体说明data.StatusComponent未定义Javascript 将提取调用的返回数据映射到导致错误的状态,javascript,reactjs,fetch,json-server,Javascript,Reactjs,Fetch,Json Server,我试图使用对JSON.server的直接获取来检索基本包以加载一些简单组件。当我在Firefox中运行这个脚本时。尝试获取资源时出现网络错误,但在网络连接本身中找不到任何400个错误。我的问题是,什么会导致这种崩溃?因为调用时页面的其余部分加载良好 编辑1:具体说明data.StatusComponent未定义 import React, { Component } from 'react'; import '../HeaderBar/HeaderBar.css'; import 'what
import React, { Component } from 'react';
import '../HeaderBar/HeaderBar.css';
import 'whatwg-fetch';
type StatusBarProps = {};
type StatusBarState = {
launch_timer: boolean;
foreGroundTimer: number;
// tslint:disable-next-line:no-any
statusBarBlocks: any;
};
class StatusBar extends Component<StatusBarProps, StatusBarState> {
timerId: number;
constructor() {
super();
this.state = {
launch_timer: true,
foreGroundTimer: -1,
statusBarBlocks: []
};
}
componentDidMount() {
fetch('http://localhost:5001/StatusComponent').then(results => {
return results.json();
}).then(data => {
let systemOff = 'green';
let systemOn = 'gray';
let statusBarBlocks = data.StatusComponent.map((Status) => {
return (
<div className="blockBar" id={Status.id} key={Status.key} style={{ backgroundColor: (this.state.foreGroundTimer >= Status.id) ? systemOff : systemOn }}> {Status.Name} </div>
);
});
this.setState({ statusBarBlocks: statusBarBlocks });
});
}
componentWillUnmount() {
clearInterval(this.timerId);
}
tick() {
this.setState({ launch_timer: !this.state.launch_timer, foreGroundTimer: (this.state.foreGroundTimer + 1) % 26 });
}
render() {
return (
<div className="location">
<div className="col-xs-6">
{this.state.statusBarBlocks}
</div>
</div>
);
}
}
export default StatusBar;
如果data.StatusComponent未定义,则数据未定义或数据上没有StatusComponent属性。控制台。要验证的日志数据。输入http://localhost:5001/StatusComponent 在浏览器地址栏中。你看到响应了吗?@RickJolly是的,它返回一个完整格式的JSON数组。这是通过JSON服务器进行的。如果您使用console.logdata;,数据是否已定义,是否具有StatusComponent属性?承诺拒绝获取的输出是什么?@RickJolly它返回一系列对象,所有对象都是正确的,但不是解析的对象数据。当我试图在let语句下调用它时。上面说data.StatusComponent未定义非常感谢您的回答。删除组件并直接解析数据使其能够正常工作