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

Question

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

Cannot read Property of Undefined

每当我在输入字段中键入内容时，都会使用 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])