时间戳

首页 > 解决方案 > 为什么我的 Material-ui React 组合框没有正确刷新？

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

问题描述

我为包含组合框的 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”时，我观察到的是：

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

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

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

标签： reactjsmaterial-ui

解决方案

我刚刚找到了阅读<Component /> 和 Component() 之间的差异的问题的答案。

简而言之：

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

推荐阅读