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

Question

我正在尝试使用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)}/>
)

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

我该如何解决？

Answer 1

您可以通过更改

来获取已传递事件的值

<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])

Answer 2

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

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

Answer 3

您已经将输入值传递给updateSearch方法。

这是您应解决的方法：

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

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

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

Answer 4

我会教你一个秘密，这些秘密多年来对我非常有效。当javascript给您cannot read property ***whateverValue*** value of undefined这样的错误时，表示您正在尝试读取不存在的对象的属性。在这种情况下，您尝试读取的对象是undefined，因此它不能有任何key: value对。

回到您的问题：TypeError: Cannot read property value of undefined

1. 使用cmd+f检查所有使用价值的地方，就会向我显示您在value上使用event.target.value的任何地方

和我在一起（我知道这很无聊，但是稍后会有所帮助）。

1. 您有一个名为updateSearch的事件处理程序。

2. 现在您需要做的就是将输入标签更改为此：

<input type="text" value={search} onChange={updateSearch}/> 不用担心，React会处理其余的事务，它将自动将事件解析为eventHandler，然后可以在此类eventHandler上进行访问。

此外，我认为您可能希望重构此组件。

类似import React, {useState, useEffect} from React 您无需在项目的其他部分调用React.useEffect或React.useState。仅useEffect或useState。 祝你好运：+1