ReactJs，DOM沒有更新

在下面的代碼：ReactJs，DOM沒有更新

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}); 
     }); 

}

來源

2015-10-18 RogerDore

你可以檢查'render（）'是否被第一個'handleEventClick（）'調用？如果沒有，可能是'shouldComponentUpdate（）'生命週期 - 方法 –

是一個問題，通過在render-method中添加一個警報，我可以看到它在組件ID更新 – RogerDore

您應該具有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之前完成。

來源

2015-10-18 15:53:19

中發生的日誌記錄 - 不起作用。當使用componentWillUpdate時，即使控制檯在第一次點擊時都沒有記錄任何東西， – RogerDore

你的'componentDidMount'或'componentWillMount'看起來像什麼？ –

我添加了對問題的更新。我componentDidMount我調用數據庫並獲取所有驅動程序。 – RogerDore

ReactJs，DOM沒有更新

回答

相關問題