我尝试获取值并将其插入到下拉列表中。但是当我尝试这样做时，我得到的值是未定义的，而不是正确的值。我想从列车数组中获取值并用它们填充下拉列表。当我获取 station.name 时，返回正确的值，但是当我尝试访问 train.number 时，返回未定义的值。

import React, { Component } from 'react';
import StationService from '../services/StationService';

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

        this.state = {
            station: {
                id: this.props.match.params.id,
                city: '',
                name: '',
                trains: [
                    {
                        number: '',
                        numberOfCarriages: ''
                    }
                ]
            }
        }

        this.changeCityHandles = this.changeCityHandles.bind(this);
        this.changeNameHandles = this.changeNameHandles.bind(this);
        this.saveStation = this.saveStation.bind(this);
    }

    componentDidMount() {

        if (this.state.station.id === '_add') {
            return;
        } else {
            StationService.getStationById(this.state.station.id).then((res) => {
                let station = res.data;
                this.setState({ name: station.name, city: station.city, number: station.trains.number })
            });
        }
        // console.log(this.state.station.name + 'dfddddd');
    }

    changeCityHandles = (event) => {
        this.setState({ number: this.state.station, trains: event.target.value });
    }

    changeNameHandles = (event) => {
        this.setState({ name: event.target.value });
    }

    saveStation = (e) => {
        e.preventDefault();
        let station = { city: this.state.city, name: this.state.name, number: this.state.train.number, numberOfCarriages: this.state.train.numberOfCarriages }

        if (this.state.station.id === '_add') {
            StationService.createStation(station).then(res => {
                this.props.history.push('/stations');
            });
        } else {
            StationService.updateStation(station, this.state.station.id).then(res => {
                this.props.history.push('/stations');
            });
        }
    }

    cancel() {
        this.props.history.push('/stations');
    }

    getTitle() {
        if (this.state.id === '_add') {
            return <h3 className="text-center">Dodaj stację</h3>
        } else {
            return <h3 className="text-center">Modyfikuj stację</h3>
        }
    }

    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        <div className="card-body">
                            <form>

                                <div className="form-group">
                                    <input  name="name" className="form-control" value={this.state.name} onChange={this.changeNameHandles} />
                                </div>

                                    <select>
                                        {this.state.station.trains.map(train => <option key={train.id} value={train.number}>{train.number}</option>)}

                                    </select>
  
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}