更新父组件状态时，对子组件进行卸载

Question

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

   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>

            )
        }
    }

每次触发此切换方法并更新组件的状态时，将卸载/重新安装TextField组件，而不仅仅是重新呈现。

我希望TextField在不先卸载的情况下重新渲染。有人可以指出我做错了吗？

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

@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>
        )
    }
}