Question

我刚刚开始学习反应，并且正在研究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黑色，但是香水搜索结果组件向我显示为Cool water。

我不确定这里缺少什么。由于定义了构造函数，因此我假设每次修改后，都会通过传递相关数据来销毁和重构PerfumeSearchResult组件。

Answer 1

构造函数将仅被调用一次。因此，如果道具更改，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>
        );
    }
}

Answer 2

    this.perfume = props.value;

应该是这样。

this.perfume = this.props.value;

（您错过了这个。）

您可以尝试

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

React组件中显示的过期数据

2 个答案: