Реагировать - ввод теряет фокус при нажатии клавиш

Question

Я столкнулся со странной ошибкой с моим компонентом ввода поиска, когда он теряет фокус на каждое нажатие клавиши и не могу понять, почему.

const App = () => {
  let [characters, setCharacters] = useState([]);
  let [filteredCharacters, setFilteredCharacters] = useState([]);
  // more state
  let [search, setSearch] = useState("");

  useEffect(() => {
    setIsLoading(true);
    axios
      .get(`https://swapi.co/api/people/?page=${pageNumber}`)
      .then(res => {
        console.log(res.data.results);
        setCharacters(res.data.results);
        setFilteredCharacters(res.data.results);
      })
      .catch(err => console.error(err))
      .then(() => {
        setIsLoading(false);
      });
  }, [pageNumber]);

  function updatePage(e) {
     // update page
  }

  function handleSearch(e) {
    setSearch(e.target.value);
    const filtered = characters.filter(character => {
      if (character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1) {
        return character;
      }
    });
    setFilteredCharacters(filtered);
  }
  function SearchBar() {
    return (
      <React.Fragment>
        <StyledInput
          type="text"
          id="search"
          value={search}
          placeholder="Search by name..."
          onChange={e => handleSearch(e)}
        />
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <GlobalStyles />
      <div className="App">
        <Heading>React Wars!</Heading>
        <SearchBar />
        <Pagination handleClick={updatePage} />
        {!isLoading && Object.entries(filteredCharacters).length ? (
          <CharacterList characters={filteredCharacters} />
        ) : (
          <LoadingBar />
        )}
      </div>
    </React.Fragment>
  );
};

Я также получаю Line 65:50: Expected to return a value at the end of arrow function array-callback-return дляcharacters.filter(), поэтому я не знаю, связано ли это с этим.

Если это поможет, развернутое приложение с ошибкой можно увидеть здесь -> https://mundane -vacation. surge.sh

Answer 1

У вас проблема с фокусом, потому что ваш компонент SearchBar объявлен внутри компонента App и воссоздается при каждом рендеринге. Вам нужно переместить SearchBar из App или просто переместить StyledInput на место SearchBar. Если вы выбираете первый способ, я рекомендую удалить React.Fragment из SearchBar, поскольку у него есть только один обработанный дочерний элемент:

function SearchBar(props) {
    return (
        <StyledInput
          type="text"
          id="search"
          value={props.value}
          placeholder="Search by name..."
          onChange={props.onChange}
        />
    );
  }

И в App:

<SearchBar onChange={handleSearch} value={search} />

Чтобы исправить предупреждение, вам всегда нужно возвращать логическое значение внутри функции filter. Теперь вы ничего не возвращаете (т.е. undefined) в случае, если character не соответствует условию. Так что измените вашу filter функцию так:

const filtered = characters.filter(character => {
    return character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1
});