Reactjs 当父组件状态更新时，响应子组件卸载

我在下面的代码中看到了我不理解的奇怪行为

   export class PlayerListPage extends React.Component<PlayerListPageProps, {toggle: boolean}> { 
constructor(props: PlayerListPageProps) {
        super(props);
        this.state = {           
            toggle: false
        };
    }

    handleToggle = () => {
        this.setState({
            toggle: !this.state.toggle
        })
    }



    render() {
            return (
                <div>
                    <TextField
                        key={1}
                        label={'label'}
                        value={'value'}
                    />
                    <Button
                        onClick={this.handleToggle}
                    >
                        Click
                    </Button>
                </div>

            )
        }
    }

导出类PlayerListPage扩展React.Component{
构造器（道具：PlayerListPageProps）{
超级（道具）；
this.state={
切换：false
};
}
handleToggle=（）=>{
这是我的国家({
切换：！this.state.toggle
})
}
render（）{
返回(
点击
)
}
}

每次触发此切换方法并更新组件的状态时，TextField组件都会卸载/重新装载，而不仅仅是重新渲染

我希望TextField在不首先卸载的情况下重新渲染。有人能指出我做错了什么吗

其他一些上下文：这是父组件（应用程序的根）：

@observer
导出类RootView扩展了React.PureComponent{
私有rootStore:rootStore=newrootstore（）；
私有appTheme:any=createMuiTheme（暗主题）；
@可观测私人玩家：玩家
异步组件didmount（）{
等待此消息。rootStore.playerStore.retrievePlayerBios（）；
this.player=this.rootStore.playerStore.getPlayer（'12'）；
}
render（）{
console.log（this.appTheme）；
返回(
{/*{！！this.player&&}*/}
)
}
}

可能是因为您忘记了创建状态？如果删除

键={1}

，还会发生这种情况吗？@azium它是一个静态键，不应该导致重新启动-render@kinduser您是对的，但是代码中的其他内容也不会导致卸载，我只是好奇这是否会导致奇怪的行为。这可能不是实际的代码？嗨，伙计们，我用额外的上下文更新了代码。基本堆栈使用typescript、React和mobex（只是设置状态的示例组件除外）。也使用材料界面，但我不认为这是相关的

@observer
export class RootView extends React.PureComponent {
    private rootStore: RootStore = new RootStore();
    private appTheme : any = createMuiTheme(DarkTheme);    

    @observable private player: Player

    async componentDidMount() {
        await this.rootStore.playerStore.retrievePlayerBios();
        this.player = this.rootStore.playerStore.getPlayer('12');
    }

    render() {          
        console.log(this.appTheme);      
        return (
            <main>
                <MuiThemeProvider theme={this.appTheme}>
                    <Provider rootStore={this.rootStore}>
                        {/* {!!this.player && <PlayerStatsView player={this.player}/>}                     */}
                        <PlayerListPage/>
                    </Provider>
                </MuiThemeProvider>                
            </main>
        )
    }
}