Javascript ReactJS:在父状态更改时重置渲染子组件

我的组件有一个奇怪的问题，至少对我来说是这样

我有一个

map（）

函数生成子元素列表。当我更改过滤器并重新填充列表时，子对象的状态保持不变。例如，如果第二个子组件的状态为

{height:auto}

，则新的第二个Allumni子组件再次具有

{height:auto}

我觉得很奇怪，因为这不是同一个元素，它是一个对应于另一个人的新元素，新内容通过道具传递

长话短说，如何强制新的子元素具有初始状态{height:0}

隐藏了很多细节，但我的家长应用程序的核心如下：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filterName: "",
            filterInitial: "Α",
            ....
            filteredGraduates:[],
            loaderVisible:true
        };
        this.updateInitial = this.updateInitial.bind(this)
        ...
      }

    componentDidMount(){
      ...
    }

    updateInitial(letter) {
      if (letter==='*'){
        this.setState({
          filterInitial: "*",
          filteredGraduates : [...graduates]
        })
      }else{
        this.setState({
        filterInitial: letter,
        filteredGraduates : graduates.filter( (graduate) => graduate.Surname.charAt(0)===letter )
      })
      }
      console.log('this is the letter: ',letter);
    }


    render() {

        return (
          <div className="app">
          <div className="filters">
            <div className="name-pagination">
              <span 
                onClick={ () => this.updateInitial('*')}
                className={'*'==this.state.filterInitial? 'active': ''}
                >Α - Ω
              </span>
              <hr/>
              {letters.map( (letter) => {
              return(
                  <span 
                  onClick={ () => this.updateInitial(letter)}
                  className={letter==this.state.filterInitial? 'active': ''}
                  >{letter}</span>
                )
               }
              )}
            </div>

            </div>
          </div> 
          {this.state.loaderVisible && <Loader /> }  
          {!this.state.loaderVisible &&  <div className="graduates-wrapper">
            {this.state.filteredGraduates
            .sort( (x,y) => x.Surname.localeCompare(y.Surname) )
            .map( (graduate) => {
              return(
                <div>
                  <Allumni
                  key={graduate.id}
                  ....  a lot of props ...
                  />               
                </div>
              )
            })
            }
          </div>}

          </div>
        );
      }
  }

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
过滤器名称：“，
过滤器初始：“Α”，
....
filteredGraduates:[]，
loadervible:true
};
this.updateInitial=this.updateInitial.bind（this）
...
}
componentDidMount（）{
...
}
更新初始（字母）{
如果（字母=='*'）{
这是我的国家({
过滤器初始：“*”，
筛选毕业生：[……毕业生]
})
}否则{
这是我的国家({
过滤器初始：字母，
filteredGraduates:graduates.filter（（graduate）=>graduate.姓氏.charAt（0）==字母）
})
}
log（'这是字母：'，字母）；
}
render（）{
返回(
this.updateInitial（'*'）}
className={'*'==this.state.filterInitial？'active'：''}
>Α - Ω

{字母.map（（字母）=>{
返回(
此.updateInitial（字母）}
className={letter==this.state.filterInitial？'active'：''}
>{字母}
)
}
)}
{this.state.loadervible&&}
{！this.state.loadervible&&
{this.state.filteredgrades
.sort（（x，y）=>x.姓氏.localeCompare（y.姓氏））
.map（（毕业）=>{
返回(
)
})
}
}
);
}
}

我的孩子是：

class Allumni extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            height:0
        };
        this.updateHeight = this.updateHeight.bind(this)

    }

    updateHeight() {        
        this.setState({
            height: this.state.height === 0 ? 'auto' : 0,
        });
    };

    render() {

        const {
            name,
            surName,
            .......
        } = this.props

        return (
        <div className="allumni-wrapper">
            <div className="allumni-main-info">
                <span className="allumni-surname">{surName}</span><br/><span className="allumni-name">{name}</span>
            </div>
            <div className="allumni-extra">
                <span className="allumni-year">{yearOf}</span><br/>
                <span className="allumni-job">{job}</span> / <span className="allumni-home-city">{homeCity}</span>
            </div>
            <div className="allumni-details">
            <AnimateHeight
                duration={ 500 }
                height={ this.state.height }
                >
                <p><span className="attribute-name">... {fatherName}</p>
                <p><span className="attribute-name">...{studies}</p>
                ....
                </AnimateHeight>
            </div>
            <div className="allumni-actions" onClick={this.updateHeight}>
                <AccountCardDetailsOutlineIcon size={30}/>
                <span className={'actions-toggle ' + (this.state.height >= 0 ? '' : 'rotated') }><ChevronDownIcon/></span>
            </div>
        </div>
        );
    }
  }

export default Allumni

类Allumni扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
身高：0
};
this.updateHeight=this.updateHeight.bind（this）
}
updateHeight（）{
这是我的国家({
高度：this.state.height==0？“自动”：0，
});
};
render（）{
常数{
名称
姓，
.......
}=这是道具
返回(
{姓氏}
{name}
{yearOf}

{job}/{homescity}
…{fatherName}

…{studies}

....
=0？“”：“旋转”）}>
);
}
}
导出默认Allumni

---

谢谢你

看起来很相关谢谢你@Kamran，你能解释一下我需要做什么来解决这个问题吗，我不能完全理解GitHub对话我不确定我是否完全理解这个问题，但我注意到

key={graduate.id}

中的

Allumni

map

应该在包装器元素中，在这种情况下，

div

。