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没有更新

回答

相关问题