React：MaterialUI Select Component 不显示传递的值

Question

我有这个带有 Select 的 FormControl 元素，它接受一个用于 MenuItem 选项的选项数组以及一个作为道具的值，这个组件看起来像这样：

const TaxonomySelector = (props) => {
const { isDisabled, taxonomies, selectedTaxonomy, handleTaxonomyChange } = props;
return (
    <Grid item xs={12}>
        {console.log(selectedTaxonomy)}
        {console.log(taxonomies)}
        <FormControl disabled={isDisabled} fullWidth>
            <InputLabel>Таксономия</InputLabel>
            <Select
                value={selectedTaxonomy || ''}
                onChange={handleTaxonomyChange}>
                {Object.values(taxonomies).map((taxonomy) => (
                    <MenuItem key={taxonomy.id} name={taxonomy.name} value={taxonomy}>
                        {taxonomy.name} от {moment(taxonomy.date).format('YYYY-MM-DD')}
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    </Grid>
  );
};

我作为道具传递的值在渲染组件的所有阶段都正确显示为在控制台中填写。而且在通过使用handleTaxonomyChange 函数将该组件用于选择的情况下，一切正常，用户能够从提供给MenuItem 的数组中选择特定选项。但是，如果此组件的父组件正在为“仅查看”或具有已预定义的值打开，则会出现问题。在这种情况下，我得到以下信息：

似乎有一些东西被传递给 Select 组件（即使我通过 DevTools 中的 React 组件检查并且值显示正确）但由于某种原因它没有被显示。

父组件包含以下与该部分相关的代码：

const INITIAL_SELECTED_TAXONOMY = null;

const [selectedTaxonomy, setSelectedTaxonomy] = useState(INITIAL_SELECTED_TAXONOMY);
const handleTaxonomyChange = (e) => setSelectedTaxonomy(e.target.value);

useEffect(() => {
    getTaxonomies();
}, []);

useEffect(() => {
    if (viewTypeOnlyView) {
        handleStageChange(1);
        handleDialogTitleChange('Конструктор КС. Режим просмотра');
    }

    if (viewTypeEdit) {
        handleDialogTitleChange('Конструктор КС. Режим редактирования');
    }

    if (viewTypeCopy) {
        handleDialogTitleChange('Конструктор КС. Дублирование КС');
    }

    if (defaultData) {
        if (defaultData.name) setName(defaultData.name);
        if (defaultData.taxonomy) setSelectedTaxonomy(defaultData.taxonomy);
        // if (defaultData.entryPoints) setSelectedEntryPoints(defaultData.entryPoints);
        if (defaultData.entryPoints) {
            getEntryPointDescsFn('4.1', defaultData.entryPoints);
        }
        if (defaultData.message) setMessage(defaultData.message);
    }
}, [viewType]);

ViewType 是一个传递给该组件并调用这些方法以使用预定义值填充状态的道具。

还有返回语句中的TaxonomySelector组件：

<TaxonomySelector
    taxonomies={taxonomies}
    isDisabled={currentStage === 1}
    selectedTaxonomy={selectedTaxonomy}
    handleTaxonomyChange={handleTaxonomyChange} />

起初我认为问题可能与组件的渲染方式有关，并且可能在触发数据预填充 useEffect 钩子之前渲染。但是，似乎其他元素，例如具有字符串值 name 和 message 的元素正在正确填写，没有任何问题。似乎该问题与 Select 元素特别相关。你能告诉我可能是什么吗？

Answer 1

看起来 FormControl 中的 disabled 属性为 true。 对于调试集 disabled prop false