ReactJS：父状态更改时的Reset-Render子组件

Question

我有一个奇怪的问题-至少对我来说：-)-我的组件问题。

我有一个map()函数，用于生成子元素列表。当我更改过滤器并重新填充列表时，子代的状态保持不变。例如，如果第二个“子校友”组件的状态为{height:auto}，则新的第二个“子校友”组件的状态为{height: auto}。

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

长话短说，如何强制我的新Child元素具有初始状态{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>
        );
      }
  }

我的孩子是：

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

谢谢