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数组，我用它来从db获取car-object。这一切都有效，res会在控制台中记录。

但是第一次点击handleEventClick()时，dom没有更新。

在render-method中我有这个：

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

}

Answer 1

您应该将componentDidUpdate中的代码改为componentWillUpdate。

在componentDidUpdate完成刷新所有DOM更新后调用

render()，这不是您想要的，因为您希望反映由handleEventClick(i)

引起的状态更改在componentWillUpdate之前调用

render()，将在触发self.state.carsOfChoosenDriver之前完成render()更改。

此外，您应该使用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之前等待异步完成。

ReactJs，DOM没有得到更新

1 个答案: