无法读取未定义 React Hooks 的属性

Question

我正在尝试使用 react hooks 创建一个搜索功能，但它一直返回错误：

无法读取未定义的属性

updateSearch每当我在输入字段中输入该函数时。

  const [search, setSearch] = React.useState('');
  const [searchResults, setSearchResults] = React.useState([]);

  const [state, setState] = React.useState({
    open: false,
    name: '',
    users:[]
  });

  useEffect(() => {
    getAllUsers();
  }, []);


  const getAllUsers = () => {
    fetch('/userinformation/', { 
      method: 'GET',
      headers: {'Content-Type':'application/json'}
    })
    .then(function(response) {
      return response.json()
    }).then(function(body) {
      console.log(body);
      setState({...state, users: body });
    })
  }

  const updateSearch = (event) => {
   setSearch(event.target.value)
  }

  React.useEffect(() => {
    const results = state.users.filter(user =>
      user.toLowerCase().includes(search)
    );
    setSearchResults(results);
  }, [search]);

return (
<input type="text" value={search} onChange={(e) => updateSearch(e.target.value)}/>
)

每当我在搜索栏中键入时，都会出现以下错误：

我怎样才能解决这个问题？

Answer 1

您可以通过更改来获取传递事件的值

<input type="text" value={search} onChange={(event) => updateSearch(event}/>

或者您可以保持输入元素不变，并将更新 updateSearch 回调更改为

const updateSearch = (event) => { setSearch(event) }

其次，您将包含应用于特定于数组方法的数组的单个项目，您还需要进行以下更改以使其工作：

React.useEffect(() => { 
 const results = state.users.filter( user => user.firstName.toLowerCase() === search ); 
 setSearchResults(results); 
}, [search])