在以下代码中:
componentDidUpdate(){
let self = this;
this.state.carsOfChoosenDriver = []; // array where I want to save the cars belonging to the choosenDriver
if (typeof this.state.choosenDriver.cars !== 'undefined'){
this.state.choosenDriver.cars.forEach(function(entry) {
request
.get('api/cars/' + entry)
.end(function(err, res){
self.state.carsOfChoosenDriver.push(res.body);
console.log(self.state.carsOfChoosenEvent);
});
});
}
}
handleEventClick(i){
this.setState({choosenDriver: this.state.drivers[i]});
}
我从触发handleEventClick()
的列表中选择一个驱动程序。choosenDriver.cars
包含一个id数组,我用它从数据库中获取汽车对象。这一切工作和res
得到登录到控制台。
但是dom在第一次点击handleEventClick()
时没有得到更新。
在渲染方法中,我有这个:
render() {
let cars = this.state.carsOfChoosenDriver.map(function(car, i){
return <li key={i}>{car.name}</li>;
});
return (
<div className="col-md-8">
{cars}
</div>
);
}
我是否应该使用另一个生命周期方法或者我做错了什么?
更新:componentDidMount() {
let self = this;
request
.get('api/driver')
.end(function(err, res){
self.setState({drivers: res.body});
});
}
您应该将componentDidUpdate
中的代码移到componentWillUpdate
中。
componentDidUpdate
在render()
完成刷新所有DOM更新后调用,这不是您想要的,因为您希望反映由handleEventClick(i)
componentWillUpdate
在render()
之前被调用,将在触发render()
之前完成self.state.carsOfChoosenDriver
的更改。
同样,你应该使用setState
而不是手动修改组件状态,这不会触发render()
。
.end(function(err, res){
self.state.carsOfChoosenDriver.push(res.body);
console.log(self.state.carsOfChoosenEvent);
});
尝试使用setState
.end(function(err, res){
self.setState({carsOfChoosenDriver: res.body});
console.log(self.state.carsOfChoosenEvent);
});
因为React中的setState
是异步的,但它触发了render()
, render()
将等待异步完成后再冲洗DOM。