2

Tengo una función para filtrar una lista con los datos que obtengo de una API, el problema es que no muestra los datos hasta que el usuarios escriba algo en el input. Los datos del Api se guardan en un array dataList y luego este array lo paso a otro setData para filtrar los datos, como estoy declarando el array vacío y se llena hasta que se ejecute useEffect es por eso que no me muestra nada porque al momento de inicializar setData con dataList esta vacío.

Ahora si inicializo asi setData(dataList); por ejemplo en el useEffect cuando se carguen los datos, el filtro no sirve.

Lo que necesito esque al cargar la pagina muestre los datos sin tener que escribir algo en el input ya que eso no es funcional.

Espero haberme dado a entender.

Codigo

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";

const App = () => {
  const url = "https://pokeapi.co/api/v2/pokemon/";
  const [dataList, setDataList] = useState([]);
  const [searchText, setSearchText] = useState("");
  const [data, setData] = useState(dataList);

  const peticionGet = async () => {
    try {
      axios.get(url).then((res) => {
        setDataList(res.data["results"]);
      });
    } catch (e) {
      console.log(e.message);
    }
  };

  useEffect(() => {
    peticionGet();
  }, []);

  const handleChange = (value) => {
    setSearchText(value);
    filterData(value);
  };
  // filter records by search text
  const filterData = (value) => {
    const lowercasedValue = value.toLowerCase().trim();

    if (lowercasedValue === "") {
      setData(dataList);
    } else {
      const filteredData = dataList.filter((item) => {
        return Object.keys(item).some((key) =>
          item[key].toString().toLowerCase().includes(lowercasedValue)
        );
      });
      setData(filteredData);
    }
  };

  return (
    <>
      Search:{" "}
      <input
        style={{ marginLeft: 5 }}
        type="text"
        placeholder="Type to search..."
        value={searchText}
        onChange={(e) => handleChange(e.target.value)}
      />
      <table
        className="table table-hover"
        style={{ fontSize: 10, textAlign: "center" }}
      >
        {data.map((row, i) => {
          return (
            <tr key={i} className="box">
              <td component="th" padding="none">
                {row.name}
              </td>
              <td align="center">{row.year}</td>
              <td align="center">{row.color}</td>
              <td align="center">{row.pantone_value}</td>
            </tr>
          );
        })}
        <div className="clearboth"></div>
        {data.length === 0 && <span>No records found to display!</span>}
      </table>
    </>
  );
};
export default App;

1 respuesta 1

0

El problema es que estás utilizando la misma variable (data) para mostrar el listado. Lo ideal es crear un componente (PokemonList) al que le pases uno u otro array (data o dataList) en función de otro estado que te indicará si los datos están filtrados o no (isFiltered).

Te dejo aquí tu ejemplo modificado. Aún hay detalles que pulir pero la idea gira entorno a eso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.