Tengo un problema. Estoy tratando de hacer una búsqueda de datos desde la API. El problema es que {people.length === 0 && <p>No data</p>} no funciona. Cuando console.log people.length el valor de longitud no cambia cuando estoy escribiendo. ¿Dónde está el problema?
Aquí está mi código:
const PeopleSearch = () => { const [people, setPeople] = useState([]); const [search, setSearch] = useState(''); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); const fetchData = async () => { const response = await axios.get(swapi); const transformedPeople = response.data.results.sort((a, b) => a.name.localeCompare(b.name) ); setPeople(transformedPeople); setLoading(false); }; fetchData(); }, []); const searchHandler = (event) => { setSearch(event.target.value); }; return ( <> <Input type="text" placeholder="Search by name..." onChange={searchHandler} /> <section> {loading ? ( <Loading /> ) : ( <PeopleList people={people.filter(({ name }) => { if (name.toLowerCase().includes(search.toLowerCase())) { return people; } })} /> )} {people.length === 0 && <p>No data</p>} </section> </> ); };Solo está llamando a setPeople una vez, en el montaje, con useEffect(() => { ... }, []) , por lo que people.length seguirá siendo el mismo una vez que se complete la llamada a la API. Debe usar la matriz filtrada tanto para la propiedad PeopleList como para la verificación No data .
También debe modificar su filter , ya que solo le importa si su valor de retorno es verdadero o no.
const filteredPeople = people.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase())); return ( <> <Input type="text" placeholder="Search by name..." onChange={searchHandler} /> <section> {loading ? ( <Loading /> ) : ( <PeopleList people={filteredPeople} /> )} {filteredPeople.length === 0 && !loading && <p>No data</p>} </section> </> );