Question

我正在尝试使用直接提取到JSON.server来检索基本包来加载一些简单的组件。当我在Firefox中运行此脚本时。我在尝试获取资源时收到“网络错误”，但在网络连接本身中找不到任何400错误。我的问题是，会导致这种崩溃的原因是什么？因为页面的其余部分在调用时加载正常。

编辑1：它特别声明data.StatusComponent未定义。

  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;

Answer 1

如果data.StatusComponent is undefined，则data未定义或StatusComponent上没有data属性。 console.log(data)要验证。

将返回数据从提取调用映射到导致错误的状态

1 个答案: