时间戳

首页 > 解决方案 > 反应组件中显示的陈旧数据

reactjs - 反应组件中显示的陈旧数据

问题描述

我刚刚开始学习反应，并且正在研究 POC。但是，我面临一个奇怪的问题。

我有两个组件，Perfumes 和 PerfumeSearchResults。Perfumes 是在循环中重复使用 PerfumeSearchResults 的组件。

下面是代码：

class Perfumes extends React.Component{
  render(){
return(
            <div>
                <div>Perfumes Page</div>
                <div>
                    <input type="text" value={this.state.perfumeName} onChange={this.handleChange}/>                    
                </div>
                <div>{
                    this.state.filteredPerfumes.map(function(perfume){
                        return <div>{perfume.perfumeName} <PerfumeSearchResults value={perfume}/></div>
                    })}
                </div>
            </div>
        );
    }
}

class PerfumeSearchResults extends React.Component{
    constructor(props){
        super(props); 

        this.perfume = props.value;

    }

    render(){
        return(
            <div>
                <span>{this.perfume.perfumeName}</span>
                <span>{this.perfume.perfumeId}</span>
                <span>{this.perfume.house}</span>
            </div>
        );
    }
}

我面临的问题是，当我过滤结果时，我在 {perfume.perfumeName} 中获得了正确的数据。但是，子组件一起向我展示了不同的数据。

就像，如果香水数组是 [Cool Water, Polo Blue, Polo Black]，当我输入 black 时，香水.perfumeName 显示 polo black，但香水搜索结果组件显示的是 Cool water。

我不确定我在这里缺少什么。由于定义了构造函数，我假设在每次修改后，PerfumeSearchResult 组件将被破坏并重建，相关数据将传递给它们。

标签： reactjs

解决方案

构造函数只会被调用一次。因此，如果道具更改，this.perfume将不会更新。您不需要将道具分配给任何东西，只需在组件中使用它们即可。

class PerfumeSearchResults extends React.Component{
    render(){
        return(
            <div>
                <span>{this.props.value.perfumeName}</span>
                <span>{this.props.value.perfumeId}</span>
                <span>{this.props.value.house}</span>
            </div>
        );
    }
}

推荐阅读