Вы не должны изменять значение searchInput
как searchInput = e.target.value
. Для обновления значения лучше вызвать функцию установки. Например,
const [searchInput, setSearchInput] = useState('');
// to update the value of searchInput call setSearchInput
function onSearchChange(e) {
setSearchInput(e.target.value)
}
Изменения состояния асинхронны. Когда вы пытаетесь отфильтровать robots
, не гарантируется, что он будет вызван с последним значением searchInput
, поэтому вы должны использовать useEffect
хук, который будет фильтровать роботов при изменении значения searchInput
.
Вот решение,
import React, { useState } from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';
function App() {
let [searchInput, setSearchInput] = useState('');
let [filterdRobots, setFilteredRobots] = useState(robots);
function onSearchChange(e) {
setSearchInput(e.target.value);
}
useEffect(() => {
setFilteredRobots(robots.filter(r =>
r.name.toLowerCase().includes(searchInput.toLowerCase())))
}, [searchInput, robots])
return (
<div className='tc'>
<h1>RoboFriends</h1>
<SearchBox searchChange={onSearchChange} />
<CardList robots={filteredRobots}/>
</div>
);
}
export default App;
проверьте codeanbox для демонстрации