React Material-ui Autocomplete: Getting "TypeError: Cannot read property 'id' of null" when clearing the search field

Question

我想使用一个自动完成字段来打开所选项目的相应模式。它工作正常，但如果我单击该字段的 'X' 按钮或使用退格键删除条目，我会收到我提到的错误消息。

这是我的自动完成组件：

 <Autocomplete
        {...defaultProps}
        clearOnEscape
        style={{ width: 400, margin: 'auto' }}
        onChange={(e, value) => handleOpen(value)}
        renderInput={params => (
          <TextField {...params} placeholder='Search for beer...' />
        )}
      />

这是处理模态的函数（我用的是materialui模态）：

const handleOpen = value => {
    if (value.id) {
      setIsClicked(beers.find(x => x.id === value.id));
    } else {
      return;
    }
    setOpen(true);
  };

Answer 1

看来这个组件的价值可以 null。（根据它的 docs 值是泛型类型）

你可以做到

if (value && value.id) {}

或防御性return喜欢

if (!value) {
    return
}
setIsClicked(beers.find(x => x.id === value.id));
setOpen(true);

安全起见

React Material-ui Autocomplete: Getting "TypeError: Cannot read property 'id' of null" when clearing the search field

React Material-ui Autocomplete: Getting "TypeError: Cannot read property 'id' of null" when clearing the search field

reactjs

autocomplete

material-ui

react-state