Question

我有一个名为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}/> }

检查后

！单击按钮，完成api调用并设置weatherInfo状态，因此正在使用来自状态的数据加载Forecast组件。没有不必要的细节的预测补偿看起来如下：

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

基本上，displayInfo正在准备数据，稍后将对其进行映射

这里是生命周期方法，我认为是麻烦制造者

componentDidMount(){
    this.displayInfo(this.props.forecastData);
}

componentWillReceiveProps(nextProps){
    if(this.props.forecastData !== nextProps){
        this.displayInfo(this.props.forecastData);
    }
}

和下面的渲染功能：

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>

问题是，当我进入本地化并第一次点击时，一切都完美呈现，但是当组件被安装并且我点击了“检查！” btn（使用其他输入值）一次，名为forecastData的prop被更改为表中的标题。但所有表格单元格都保留旧值，直到我点击“检查！”＃39; btn再次（第二次）具有相同的输入值第二次比他们的值被更新，正是我在点击一次而不是两次之后所期望的。

Answer 1

将您的代码更改为此。您应该使用新的道具数据重新渲染。

componentWillReceiveProps(nextProps){
    if(this.props.forecastData !== nextProps.forecastData){
        this.displayInfo(nextProps.forecastData);
    }
}

react.js为什么组件在更换道具后不会立即重新渲染

1 个答案: