Estoy tratando de mostrar qué valores elijo de una opción de selección de un componente que se ha rellenado previamente usando useSelector hook; (no se permite usar React Select Library) Mi problema es que la primera vez que lo selecciono, obtuve una matriz vacía devuelta; se rellena con el primer valor elegido cuando se selecciona por segunda vez. Cada selección posterior, completa la matriz con el valor de acción anterior
Aquí está el código relacionado:
const valueTemp = useSelector((state) => state.temperaments) const [input, setInput] = useState({ name: "", height_min: "", height_max: "", weight_min: "", weight_max: "", life_min: "", life_max: "", image: "", temperament: [], }) var arrTemps=[]; function showValues(){ for(var i = 0; i < input.temperament.length; i++){ for(var j=0; j < valueTemp.length;j++){ if(parseInt(input.temperament[i])===valueTemp[j].id){ arrTemps.push(valueTemp[j].name) } } } return arrTemps; } var showMe="" ; function handleSelect(e){ setInput({ ...input, temperament:[...input.temperament, e.target.value ] }) showMe=showValues() console.log(showMe) document.getElementById('mostrame').innerText=showMe; } <select className={style.orderLarge} onChange={handleSelect}> <option value="">Temperaments:</option> { valueTemp.map((e) => ( <option key={e.id} value={e.id}>{e.name}</option> )) } </select> <div id="mostrame"style={{color:'burlywood'}}>Temperamentos:</div>¡Apreciaria muchísimo su ayuda! ¡Saludos de antemano!
No estoy seguro de por qué estabas haciendo todas las lógicas de bucle. Por lo que entendí, solo necesitabas el historial de tu menú desplegable. Agregaré mi versión de su código.
Su selección fue un elemento de descontrol. He agregado value en eso, así que ahora reacciona lo controla. Tu historial History: {[...input.temperament]} está disponible después de la selección. El valor seleccionado es el último elemento de la matriz. En lugar de document.getElementById('mostrame').innerText=showMe; puede usar directamente el último valor seleccionado como lo he hecho yo. No se recomienda acceder a los elementos DOM como lo está haciendo. Muestre el nombre del elemento seleccionado como se muestra. Todo funciona porque estoy convirtiendo el valor seleccionado en un NÚMERO. Cuando selecciona un elemento, el valor devuelto es una cadena. Debe convertir eso en un número si está usando el número. temperament: [...input.temperament, +e.target.value] . Agregar + convertirá una cadena en un número.
import React, { useState } from 'react'; export default function App() { const valueTemp = [ { id: 1, name: 'abc' }, { id: 2, name: 'efg' }, { id: 3, name: 'hij' } ]; const [input, setInput] = useState({ temperament: [] }); function handleSelect(e) { setInput({ ...input, temperament: [...input.temperament, +e.target.value] }); } return ( <> <select onChange={handleSelect} value={input.temperament[input.temperament.length - 1]} > <option value="">Temperaments:</option> {valueTemp.map(e => ( <option key={e.id} value={e.id}> {e.name} </option> ))} </select> <div>History: {[...input.temperament]}</div> <div> History Values: {input.temperament.map(i => valueTemp.find(v => v.id === i)?.name+", ")} </div> <div>Selected value = { valueTemp.find( v => v.id === input.temperament[input.temperament.length - 1] )?.name }</div> </> ); }