在ReactJs中获取未定义的值

Question

我正在尝试获取值并将它们插入下拉列表中。但当我尝试这样做时，我得到的值是未定义的，而不是正确的值。我想从train数组中获取值，并用它们填充下拉列表。当我得到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>
);
}
}

Answer 1

Try this:-

{this.state.station && this.state.station.trains.length && 
&& this.state.station.trains.map((train , i) => {
return (
<React.Fragment>
{ train && train?.number &&
<option key={train?.id} value={train?.number}>{train?.number}</option>       
}
</React.Fragment>
);
})
}

Answer 2

它是trains[0].number而不是trains.number，因为您试图访问的对象嵌套在数组中。

Answer 3

StationService.getStationById(this.state.station.id).then((res) => {
let station = res.data;
this.setState({ name: station.name, city: station.city, number: station.trains.number })
});

此代码尝试设置名称、城市和数字的状态变量。相反，试着做这个

StationService.getStationById(this.state.station.id).then((res) => {
let station = res.data;
this.setState({ station: { 
...state.station,
name: station.name,
city: station.city,
trains: station.trains }
})
});