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

Posted 2023-02-22

【中文标题】React：MaterialUI Select Component 不显示传递的值

【英文标题】：React: MaterialUI Select Component doesn't show passed values a prop

【发布时间】：2021-10-19 07:20:07

【问题描述】：

我有这个带有 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 元素特别相关。你能告诉我可能是什么吗？

【参考方案1】：

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

【讨论】：

尝试摆脱禁用的道具，但仍然一样，只是在仅查看页面启用了选择器并且用户可以选择，但是我尝试实现的结果是默认传递一些值从父组件

值=selectedTaxonomy || '' 尝试更新到 value=selectedTaxonomy

我之前尝试将 value 属性更改为各种内容，例如传递 selectedTaxonomy 或“selectedTaxonomy || null”，但问题仍然存在

看来问题可能与 selectedTaxonomy 是一个对象有关

Вселектможновкачестве值использоватьобъект，нотогдавслучаедефолтногозначениянеобходимоистользоватьобъекткоторыйимееетссылочноеравенство（reference equality）соднимобъектомизмасива选项。 Пример