如何解决React Material-ui Autocomplete:清除搜索字段时获取“TypeError:无法读取null的属性'id'”
我想使用自动完成字段为所选项目打开相应的模式。它工作正常,但如果我点击字段的“X”按钮或只是使用退格键删除条目,我会收到我提到的错误消息。
这是我的自动完成组件:
<Autocomplete
{...defaultProps}
clearOnEscape
style={{ width: 400,margin: 'auto' }}
onChange={(e,value) => handleOpen(value)}
renderInput={params => (
<TextField {...params} placeholder='Search for beer...' />
)}
/>
这是处理模态的函数(我用的是material ui modal):
const handleOpen = value => {
if (value.id) {
setIsClicked(beers.find(x => x.id === value.id));
} else {
return;
}
setOpen(true);
};
解决方法
这个组件的值似乎可以是 null
。 (根据它的 docs 值是泛型类型)
你可以做到
if (value && value.id) {}
或者像这样的防守回归
if (!value) {
return
}
setIsClicked(beers.find(x => x.id === value.id));
setOpen(true);
为了安全
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。