为什么我的 Material-ui React 组合框没有正确刷新？答案

【问题标题】：Why is my Material-ui React combo-box not refreshing correctly?为什么我的 Material-ui React 组合框没有正确刷新？
【发布时间】：2020-11-02 10:53:51
【问题描述】：

我为包含组合框的 React 组件准备了以下代码：

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

export default function MyTab() {

    const [currentPhase, updatePhase] = React.useState(1);

    function PhaseComponent() {        
        return <TextField select variant="outlined" label="Phase" defaultValue="1" onChange={e => updatePhase(e.target.value)}>
            <MenuItem key={1} value="1">Phase 1</MenuItem>
            <MenuItem key={2} value="2">Phase 2</MenuItem>
        </TextField>
    }
    
    return <div>
        <PhaseComponent /> 
    </div>
}

执行代码后，当我在组合框中选择“阶段 2”时，我观察到的是：

状态（currentPhase）已正确更新；
组合框错误地显示“阶段 1”；
如果我再次选择“阶段 2”，组合框会正确显示“阶段 2”。

请注意，我找到了几种使组合框显示正确值的方法：

将 PhaseComponent 移动到单独的文件中；
将 PhaseComponent 保留在同一文件中，但将其移出 MyTab()；
在 PhaseComponent 内移动 const [currentPhase, updatePhase] = React.useState(1);；
将<PhaseComponent />替换为{PhaseComponent()}；
删除 onChange（当然状态不会更新）。

谁能解释一下这里发生了什么以及为什么我原来的解决方案不起作用？我也很好奇为什么我的解决方法 4 有效。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我刚刚找到了阅读Difference between <Component /> and Component()的问题的答案。

简而言之：

<PhaseComponent /> 使组合框再次挂载并在选择后重新渲染，因此它采用默认值（即 1）。
所描述的变通解决方案（例如调用 PhaseComponent()）没有这种效果。

【讨论】：