0
273
Vistas¿Cómo devolver una lista según el elemento seleccionado?
Todavía soy un principiante en ReactJS y estoy creando un proyecto que funciona con una lista de pokemons. El usuario selecciona un tipo de pokemon, y luego debo devolver una lista de acuerdo a la selección del usuario.
Tengo una lista con todos los pokemons, pero algunos pokemons pueden pertenecer a más de un tipo, como se muestra en este ejemplo a continuación:
¿Podría decirme cómo crear una lista con solo el tipo de pokemon que seleccionó el usuario? Creo que puedo hacer esto usando reducer() , pero no tengo idea de cómo hacerlo.
Aquí está mi código que puse en codesandbox
import React from "react"; import { useHistory } from "react-router-dom"; import { Button } from "@material-ui/core"; import { types } from "./data"; import "./styles.css"; const App = () => { const history = useHistory(); const handleType = (type) => { history.push({ pathname: "/list", state: type }); }; return ( <div className="content"> <h3>Pokémon Types</h3> {types.results.map((type) => ( <Button key={type.name} style={{ margin: "5px" }} variant="contained" onClick={() => handleType(type.name)} > {type.name} </Button> ))} </div> ); }; export default App; import React from "react"; import { useLocation } from "react-router-dom"; import { pokemons } from "../data"; const List = () => { const { state } = useLocation(); console.log("state: ", state); console.log(pokemons); return <div>List</div>; }; export default List;Gracias de antemano por cualquier ayuda.
1 Respuestas
Responde la pregunta0
Tienes muchas maneras de hacerlo, pero como todavía estás aprendiendo y obtuviste una buena muestra del código, te presentaré useMemo:
puede agregar useMemo para memorizar y procesar datos, y luego obtener el resultado directamente...
mira este ejemplo:
const pk = useMemo(() => { if (!state) return "State Empty!"; let result = []; pokemons.forEach((v, i) => { if (v.type.includes(state)) { result.push(<li key={v.name + i}>{v.name}</li>); } }); return result; }, [pokemons, state]); return <ul>{pk}</ul>;Con este código, obtuve su lista, revisé los detalles en un ciclo simple y luego recuperé la lista necesaria...
Notas:
- En la clave configuré el nombre y la i, pero no es totalmente correcto, pero parece que hay duplicación en los datos, y ¿por qué no es totalmente correcto?, ya que debemos asegurarnos de evitar volver a renderizar cuando no hay un cambio real, pero indexar si cambio de orden que significa volver a renderizar...
- Puede usar de todos modos como reductor, filtro o crear un componente separado y colocarlo anidado en useMemo
- Puede mejorar el estilo de datos para verificar o recuperar datos rápidamente mediante la tabla hash...