0
150
Vistas¿Cómo realizo un seguimiento del estado cuando hay varias selecciones?
tengo un escenario donde un usuario tiene tres opciones:
puede elegir el tipo_de_carrocería de un automóvil, el año_de_automóvil en que se fabricó o la marca_de_automóvil .
Comenzando, tengo un carJson estatal que está configurado en una lista de automóviles.
"2": { "attrs": { "car_year": 2021, "car_make": "Volvo", "car_model": "XC60", "car_trim": "T8 Plug-In Hybrid Inscription Expression eAWD", "body_type": "SUV" } }, "4": { "attrs": { "car_year": 2020, "car_make": "Honda", "car_model": "Fit", "car_trim": "LX Manual", "body_type": "hatchback" } }, "5": { "attrs": { "car_year": 2020, "car_make": "Jeep", "car_model": "Renegade", "car_trim": "Trailhawk 4WD", "body_type": "SUV" } }, "6": { "attrs": { "car_year": 2022, "car_make": "Kia", "car_model": "Forte", "car_trim": "FE Manual", "body_type": "sedan" } }, si el usuario elige body_type , configuré la actualización de setCarJson para que solo incluya autos que tengan un tipo de carrocería coincidente.
a partir de ahí, las opciones car_year y car_make se actualizan para mostrar solo los autos filtrados. pero las opciones de body_type siguen siendo las mismas, por lo que el usuario puede cambiar su elección.
por ejemplo , el usuario elige 'SUV', por lo que los años disponibles para seleccionar serán {2020,2021}. muy claro.
pero ahora, digamos que el usuario elige 2021. la marca solo debe mostrar {volvo} y las opciones de tipo de carrocería no deben cambiar. entonces debería haber tres estados diferentes, ¿verdad?
muy bien podría ser que el usuario comience con la marca o el año, en lugar del tipo de cuerpo, por lo que quiero que la primera opción ofrezca las opciones originales.
y, finalmente, para estructurarlo de modo que digamos que el usuario deselecciona body_type después de elegir car_year ; se actualizará para mostrar solo body_types que se encuentran dentro de ese año seleccionado.
básicamente, tres selecciones, que progresivamente/regresivamente se filtran entre sí.
simplemente buscando algún tipo de dirección sobre cómo pensar en esto. Gracias.
1 Respuestas
Responde la pregunta0
¿Qué tal esto?
https://react-wj8s1v.stackblitz.io/
En caso de que el bombardeo de pila no funcione, aquí está mi código
import React, { useState, useEffect } from 'react'; export default function App() { // Initial Data const cars = { 2: { attrs: { car_year: 2021, car_make: 'Volvo', car_model: 'XC60', car_trim: 'T8 Plug-In Hybrid Inscription Expression eAWD', body_type: 'SUV', }, }, 4: { attrs: { car_year: 2020, car_make: 'Honda', car_model: 'Fit', car_trim: 'LX Manual', body_type: 'hatchback', }, }, 5: { attrs: { car_year: 2020, car_make: 'Jeep', car_model: 'Renegade', car_trim: 'Trailhawk 4WD', body_type: 'SUV', }, }, 6: { attrs: { car_year: 2022, car_make: 'Kia', car_model: 'Forte', car_trim: 'FE Manual', body_type: 'sedan', }, }, }; // state to house our new filtered option const [filteredCars, setFilteredCars] = useState(cars); // all of our cars const carIndexes = Object.keys(filteredCars); // create select options for make, year, and body const bodySelects = () => { const bodies = []; carIndexes.forEach((index) => { bodies.push(filteredCars[index].attrs.body_type); }); return bodies.map((x, y) => <option key={y}>{x}</option>); }; const yearSelects = () => { const years = []; carIndexes.forEach((index) => { years.push(filteredCars[index].attrs.car_year); }); return years.map((x, y) => <option key={y}>{x}</option>); }; const makeSelects = () => { const makes = []; carIndexes.forEach((index) => { makes.push(filteredCars[index].attrs.car_make); }); return makes.map((x, y) => <option key={y}>{x}</option>); }; // On select filter the array const onSelect = e => { const newFiltered = []; const type = e.currentTarget.dataset.type; carIndexes.forEach((index) => { if (filteredCars[index].attrs[type] == e.currentTarget.value){ newFiltered.push(filteredCars[index]) }; }); setFilteredCars({...newFiltered}) }; return ( <> <div> <select onChange={onSelect} data-type="body_type"> <option selected>Pick Body</option> {bodySelects()} </select> <select onChange={onSelect} data-type="car_year"> <option selected>Pick Year</option> {yearSelects()} </select> <select onChange={onSelect} data-type="car_make"> <option selected>Pick Make</option> {makeSelects()} </select> <button onClick={() => setFilteredCars(cars)}>reset options</button> </div> <p>{filteredCars ? JSON.stringify(filteredCars) : ''}</p> </> ); }