ReactJs , DOM does not get updated

ReactJs , DOM does not get updated

本文关键字：get updated not does DOM ReactJs      更新时间：2023-09-26

在以下代码中:

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。

相关文章：