无法读取未定义的 ReactJS 的属性 'number'

Question

我正在使用 ReactJS 作为我的应用程序的前端。我从 API 获取值，但是当我尝试获取它们时出现错误“无法读取属性未定义的数量”。这是我的代码：

class ViewStationComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            id: this.props.match.params.id,
            station: {}
        }
    }

    componentDidMount() {
        StationService.getStationById(this.state.id).then(res => {
            this.setState({ station: res.data });
            console.log(res.data);
        })
    }

    render() {
        return (
            <div>
                <div>{this.state.station.name}</div>
                <h1>{this.state.station.trains.number}}</h1>
            </div>
        );
    }
}

这是响应，我尝试获取的值是 number 和 numberOfCarriages。

Answer 1

更改为：

render() {
    return (
        <div>
            <div>{this.state.station?.name}</div>
            <h1>{this.state.station?.trains[0]?.number}}</h1>
        </div>
    );
}

Answer 2

您的 trains 属性是一个数组，您可以这样做：

<h1>{this.state.station.trains[0].number}</h1>

Answer 3

如果您使用地图，请记住可能有不止 1 列火车。

render() {
    return (
        <div>
            <div>{this.state.station.name}</div>
            {this.state.station.trains.map(train => <h1 key={train.id}>train.number<h1>)}
        </div>
    );
}

无法读取未定义的 ReactJS 的属性 'number'

Cannot read property 'number' of undefined ReacJS

javascript

api

response

reactjs

无法读取未定义的 ReactJS 的 属性 'number'

Cannot read property 'number' of undefined ReacJS

javascript

api

response

reactjs

无法读取未定义的 ReactJS 的属性 'number'