Reactjs 物料UI菜单项不显示具有硬编码值的选定物料

我正在使用材质ui

MenuItem

如下所示，并注意到以下问题。我已经硬编码了

Yes

或

No

值，在UI上，我的下拉列表如下所示：

图1:

当我单击下拉图标时，它会显示以下内容：

图2:

当我选择

Yes

或

No

时，我的选择不会停留在屏幕上，选择后，它会返回到与图1完全相同的位置。为什么会这样？我注意到这只发生在硬编码的值上。我通过api调用显示动态数据的所有其他地方都在屏幕上显示所选项目

以下是我的代码片段：

<CustomSelectDropdown name="yesornofordata" type="select" placeholder="Is the data approved?"/>

const CustomSelectDropdown = ({
    placeholder,
    disabled,
    ...props
}) => {
const [field, meta] = useField(props);

const errorText = meta.error && meta.touched ? meta.error : "";


    return (
    <div>
    <InputLabel id="selectLabel">{placeholder}</InputLabel>
    <Field
        labelId={placeholder}
        {...field}
        disabled={disabled}
        as={StyledSelect}
        error={!!errorText}>
        <MenuItem  data-selected-value={'Y'} onClick={handleSelectedAnswer}>Yes</MenuItem>
        <MenuItem  data-selected-value={'N'} onClick={handleSelectedAnswer}>No</MenuItem> 
    </Field>
    </div>
    );
};

---

handleSelectedAnswer的代码是什么？还有，你的第一个handleSelectedAnswer（你拼写的是handleSelectedAnswer）有一个拼写错误。@Jake我在帖子中添加了该函数的代码。请看一看。这可能与我的问题无关？此外，我还更正了输入错误。这是在粘贴代码时发生的。如果有任何问题我可以回答，请告诉我。因此，您正在将值保存到会话存储中，但是我看不到您在哪里访问会话存储来定义字段值MUI页面上有一个如何执行此操作的示例-如何从会话存储中使用它在菜单中显示

Yes

或

No

？我记得看过你分享的链接，所有的例子都没有显示选中的项目。如果我遗漏了什么，请告诉我。谢谢

const handleSelectedAnswer = event => {
    const { selectedValue } = event.currentTarget.dataset;
    console.log("Storing selected answer in session storage ")
    sessionStorage.setItem("selectedAnswer", selectedValue)
}