Tengo datos en el servidor y dos selecciones de reacción. Estos son mis datos JSON:
[{ "KIA": [ { "id": 1, "name": "Rio" }, { "id": 2, "name": "Sorento" }, { "id": 3, "name": "Stinger" } ] },{ "VOLKSWAGEN": [ { "id": 4, "name": "Polo" }, { "id": 5, "name": "Golf" }, { "id": 6, "name": "Tiguan" }, ] }]Esta es mi primera selección donde obtuve una variedad de autos del servidor y los puse en el estado 'autos'. Funcionó, ahora puedo elegir marcas.
<Select options={ cars.map(c => ( { value: Object.keys(c), label: Object.keys(c) } )) } /> Así que esto es lo que quiero para la segunda selección:
Si elijo la marca KIA en la primera selección --> tengo las opciones 'Rio, Sorento, Stringer' en la segunda selección.
Si elijo la marca VOLKSWAGEN en la primera selección --> tengo las opciones 'Polo, Gold, Tiguan' en la segunda selección.
¿Hay alguna manera de vincular dos selecciones a una pieza de datos donde las opciones de la segunda selección dependen de la opción seleccionada en la primera selección? Puaj..
En la primera selección, comience inicializando selected_sub_cats a [] en el estado
<Select options={ cars.map(c => ( { value: Object.keys(c), label: Object.keys(c) } )) } onChange={(v)=>this.setState({selected: v, selected_sub_cats: cars.filter(car =>Object.keys(car) === v)})} />Luego en la segunda selección
<Select options={this.state.selected_sub_cars} onChange={(v)=>this.setState({selected_sub: v, })} />Este fragmento de código es muy inexacto, tendrá que formatear los datos y depurarlos ya que no lo ejecuté. Es solo para darle una idea general sobre la lógica:
const dataSet = [{ "KIA": [ { "id": 1, "name": "Rio" }, { "id": 2, "name": "Sorento" }, { "id": 3, "name": "Stinger" } ] },{ "VOLKSWAGEN": [ { "id": 4, "name": "Polo" }, { "id": 5, "name": "Golf" }, { "id": 6, "name": "Tiguan" }, ] }]El componente comienza aquí:
const [ selectedBrand, setSelectedBrand ] = useState() const [ selectedModel, setSelectedModel ] = useState() const [ brandOptions, setBrandOptions ] = useState(Object.keys(dataSet)) const [ modelOptions, setModelOptions ] = useState() // Based on the brand you select, the useEffect should set the relevant options for the models useEffect(()=>{ setModelOptions(brandOptions[selectedBrand]) },[selectedBrand]) function handleChangeBrand(brand){ setSelectedBrand(brand) } function handleChangeModel(model){ setSelectedModel(model) } return ( <Select value={selectedBrand} onChange={(value) => handleChangeBrand(value)} options={brandOptions} /> <Select value={selectedModel} onChange={(value) => handleChangeModel(value)} options={modelOptions} />