[英]react.js why component doesn't rerender immediately after changing props
I got component named App, which has a button that provides data by prop for component named Forecast 我得到了名为App的组件,它具有一个按钮,可通过prop为名为Forecast的组件提供数据
<form onSubmit={this.searchFor}>
<input type="text" placeholder="Enter localization" ref={(input) => { this.textInput = input; }}/>
<button onClick={this.searchFor}>Check!</button>
<button onClick={this.getCoords}>Find me!</button>
</form>
{weatherInfo && <Forecast forecastData={weatherInfo}/> }
after Check! 经过检查! button is clicked , api call is done and weatherInfo state is set , so therefore Forecast component is being load with the data from state.
单击按钮,将完成api调用并设置了weatherInfo state,因此从该状态加载了Forecast组件。 Forecast comp without unnecessary details looks as beneath:
没有不必要的详细信息的预测补偿如下所示:
displayInfo(weatherInfo) {
const {displayItemTo,displayItemFrom} = this.state;
let {displayItems} = this.state;
displayItems = weatherInfo.list.filter((item, idx) => {
return idx < displayItemTo && idx >= displayItemFrom;
}).map((item,idx) =>{
return [
<td>{new Date(item.dt_txt.slice(0,10)).getDay()}</td>,
<td>{item.dt_txt.slice(0,10)}</td>,
<td>{item.dt_txt.slice(11,19)}</td>,
... and few more <td>
});
this.setState({
displayItems:displayItems[0].map((col, i) => displayItems.map(row => row[i]))
});}
Basically displayInfo is preparing data , which will be mapped later 基本上displayInfo正在准备数据,稍后将进行映射
and here are lifecycle methods , which i think are troublemakers 这是生命周期方法,我认为这是麻烦制造者
componentDidMount(){
this.displayInfo(this.props.forecastData);
}
componentWillReceiveProps(nextProps){
if(this.props.forecastData !== nextProps){
this.displayInfo(this.props.forecastData);
}
}
and the render func below: 以及下面的渲染功能:
render(){
const weatherInfo = this.props.forecastData,
rowNames = ['day','data','hour','temp','humidity','conditions','','windspd','winddir'],
{displayItemTo,displayItemFrom,displayItems} = this.state
console.log(displayItems);
return(
<div className="tableBox">
<div className="back"></div>
<table>
<caption>{weatherInfo.city.name + " , " + weatherInfo.city.country}</caption>
<tbody>
{displayItems.map((item,idx) =>{
return <tr key={idx}><td key={'rowName'+idx}>{rowNames[idx]}</td>{[...item]}</tr>
})}
</tbody>
and the issue is that , when i enter localization and click for first time everything is rendering perfectly but when the component is mounted and i am clicking 'Check!' 问题是,当我进入本地化并第一次单击时,所有内容都呈现完美,但是在安装组件并单击“检查!”时, btn(with other input val) once ,prop named forecastData is being changed so as caption in table.
btn(与其他输入值val)一次,更改了名为ForecastData的属性,以便在表中显示标题。 but all table cells stays with old values until i will click the 'Check!'
但是所有表格单元格都保持旧值,直到我点击“检查!” btn again (second time) with same input value for a second time than their values are being updated , just what i did expected after clicking once not twice.
再次btn(第二次)第二次使用相同的输入值,而不是它们的值正在更新,这正是我两次单击一次后所期望的。
Change your code to this. 将代码更改为此。 You are supposed to re-render using the new props data.
您应该使用新的道具数据重新渲染。
componentWillReceiveProps(nextProps){
if(this.props.forecastData !== nextProps.forecastData){
this.displayInfo(nextProps.forecastData);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.