Невозможно прочитать свойство неопределенных React Hooks

Question

Я пытаюсь создать функцию поиска, используя обработчики реакции, но она продолжает выдавать ошибку:

Невозможно прочитать свойство неопределенного

в функции 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) }

Во-вторых, вы применяете включения к одному элементу массива, который указан c для методов массива, вам также необходимо внести следующие изменения, чтобы он работал:

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

Answer 2

Я бы научил вас секрету, который очень хорошо работал для меня на протяжении многих лет. Когда 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

Оставайтесь со мной (я знаю, что это скучно, но это поможет позже ).

У вас есть обработчик событий с именем updateSearch.

Все, что вам нужно здесь сейчас, это изменить свой входной тег следующим образом:

<input type="text" value={search} onChange={updateSearch}/> Не волнуйтесь, React обработает все остальное, он автоматически анализирует событие в eventHandler, к которому затем можно получить доступ в таком eventHandler.

Кроме того, я думаю, что вы, возможно, захотите рефакторинг этого component.

Что-то вроде import React, {useState, useEffect} from React, вам не нужно будет звонить React.useEffect или React.useState в других частях проекта. просто useEffect или useState. Гудлак: + 1

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

на вашем входе вы уже передаете значение onChange={(e) => updateSearch(e.target.value), а на updateSearch вы пытаетесь получить к нему доступ. Измените его следующим образом, если вы хотите получить доступ к event в методе updateSearch и получить из него значение.

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