Material-UI Autocomplete按退格清除值时getOptionSelected报undefined怎么解决

问题原因 #

1. 你开启了disableClearable属性，该属性本身禁止Autocomplete组件值被清空，手动强制清空会触发组件异常。
2. 清空操作后consistenceProject被设为undefined，但getOptionSelected回调中直接访问consistenceProject.id，对undefined访问属性直接抛出错误。
3. getOptionSelected回调没有遵循MUI的参数规范，没有使用回调传入的第二个参数（当前选中值），而是直接读取外部状态，容易出现状态不同步问题。

解决步骤 #

1. 修改getOptionSelected回调 #

补充空值判断，使用组件传入的value参数而不是外部状态：

getOptionSelected={(option, value) => value?.id ? option.id === value.id : false}

2. 移除disableClearable属性 #

你需要清空功能，该属性和需求冲突，直接删除该属性即可，默认值为false允许清空。

3. 优化退格清空逻辑 #

明确将空值设为null（MUI Autocomplete的标准空值），阻止默认退格行为避免冲突，同时替换已废弃的keyCode判断：

const deleteProject = (event) => {
    if (projectValue && focusedProject && event.key === 'Backspace') {
            event.preventDefault()
            sessionStorage.removeItem('worklogConsistenceUser')
            sessionStorage.removeItem('worklogProject')
            setProjectValue(null)
            setConsistenceProject(null)
    }
}

4. 补全handleProjectChange的空值处理 #

适配用户手动点击清空按钮的场景，统一空值处理逻辑：

const handleProjectChange = (event, newValue) => {
    if (newValue != null) {
        setProjectValue(newValue.id)
        setConsistenceProject(newValue)
        !id && sessionStorage.setItem('worklogConsistenceProject', JSON.stringify(newValue))
        !id && sessionStorage.setItem("worklogProject", JSON.stringify([newValue.id]))
    } else {
        setProjectValue(null)
        setConsistenceProject(null)
        sessionStorage.removeItem('worklogConsistenceUser')
        sessionStorage.removeItem('worklogProject')
    }
}

内容的提问来源于stack exchange，提问作者poPaTheGuru