Question

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

2020-02-06

16317

javascript reactjs events react-hooks

我尝试使用 React Hooks 创建搜索功能，但它始终返回错误：

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

您可以通过更改

210358344

来达到通过事件的值> 615656896

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

<代码> 008469352

Answer 2

在您的输入中，您已传递值 onChange={(e) => updateSearch(e.target.value) ，并且在 updateSearch 中您正尝试访问它。如果您想在 updateSearch 方法中访问 event 并从中获取值，请像这样更改它。

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

Answer 3

您已将输入的值传递到 updateSearch 方法中。

您应该这样修复它：

const updateSearch = (value) => {
   setSearch(value);
};

至于您在 useEffect 钩子上提出的第二个问题，您必须在您的一个属性（ firstName 或 lastName ）上调用 toLowerCase() ，具体取决于您需要搜索的内容。

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