reactjs - 无法读取自动完成 Material ui 上 null 的属性 'name'

Question

当我单击带有 Material ui 的自动完成的清除十字按钮时，出现错误。 这是我的自动完成:

               <Autocomplete
                autoComplete
                fullWidth
                options={esportTeams.list}
                getOptionLabel={(option) => option.name ?? ""}
                className={classes.formControl}
                onChange={(e, value) => setFilter({ ...filter, team: value.name })}
                renderInput={(params) => <TextField {...params} fullWidth label="Teams" 
                variant="outlined" value={filter.team ?? ""} size="small" />}
                />

当我单击叉号以清除字段时，我收到此错误:无法读取 null 的属性“名称”，并且我已经测试了很多东西，但没有人工作...... 谢谢!

Answer 1

说明:

如果您深入思考该错误，当您按下 Autocomplete 组件内的 X 按钮时，它会触发 onChange 事件，因为它将值更改为 null

onChange={(e, value) => setFilter({ ...filter, team: value.name })}

对象是复杂的数据结构。 JavaScript 中最简单的对象是普通对象——键和关联值的集合:

let myObject = {
  companyName: 'Exploretale Technologies, OPC'
};

在某些情况下无法创建对象。对于这种情况，JavaScript 提供了一个特殊值 null — 表示缺少对象。

let myObject = null;

“null 是一个原始值，表示有意不存在任何对象值。”

这就是为什么你会遇到“TypeError:无法读取 null 的属性(读取“名称”)”

解决方案:

onChange={(e, value) => 
if(value === null) {
 //Just give a value to a value to avoid null
 //e.g. value = ""
}
setFilter({ ...filter, team: value.name })}