ReactJs，DOM沒有更新

Question

在下面的代碼：

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> 

    ); 
    } 

應該我也許還可以利用另一種生命週期方法或者我究竟做錯了什麼？

UPDATE：

componentDidMount() { 
    let self = this; 
    request 
     .get('api/driver') 
     .end(function(err, res){ 
     self.setState({drivers: res.body}); 
     }); 

} 

Answer 1

您應該具有componentDidUpdate代碼移到componentWillUpdate代替。

componentDidUpdate之後render()完成沖洗所有的DOM的更新，這是不是你想要什麼叫做你想反映引起handleEventClick(i)

componentWillUpdate狀態改變render()之前被調用，它WILL有在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); 
}); 

因爲setState在陣營是異步的，但它觸發render()，並render()將等待異步衝廁DOM之前完成。