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

我正在尝试使用react挂钩创建搜索功能，但它会不断返回错误:



每当我在输入字段中键入时，就在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)}/>
)

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


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

最佳答案

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

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

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

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

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

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