Estoy trabajando en un proyecto en el que tengo dos campos de entrada y un botón de envío. Cuando hago clic en enviar datos de ambos campos almacenados en una variable. Ahora quiero realizar alguna función en estos datos como se muestra en mi código.
El código javascript de Vanilla está perfectamente bien. Pero enfrenta un problema en React js
var el=document.getElementById("button"); if(el) { el.addEventListener("click", function(max,min) { const max1=document.getElementById("max").value; const min1=document.getElementById("min").value; const colors=['#000000', '#0004BF', '#0008FF', '#0140FF', '#0080FF', '#03BFFF', '#02FBFF', '#41FBBF', '#81FC81', '#BFFD41', '#FFFF00', '#FFBF01', '#FF8001', '#FF4000', '#BF2500', '#801500', '#FFFFFF'] const n=16; var v=[]; var lmin = Math.log(min1); var lmax = Math.log(max1); var delta = (lmax-lmin)/(n-1); for(let i = 1;i<16 ;i++) { let obj={} obj.key2=Math.exp(lmin+delta*(i-1)).toFixed(2); obj.key1=Math.exp(lmin+delta*((i+1)-1)).toFixed(2) obj.value=colors[i]; v.push(obj); } console.log(v) print(v); } )}Debajo del código React js. Quiero implementar el mismo código en reaccionar como lo implemento en js simple.
const maxFreq = useRef(); const [val,setVal] = useState([]) const [obj,setObj]=useState({key1:0,key2:0:value:""}); const minFreq = useRef(); const colors=['#000000', '#0004BF', '#0008FF', '#0140FF', '#0080FF', '#03BFFF', '#02FBFF', '#41FBBF', '#81FC81', '#BFFD41', '#FFFF00', '#FFBF01', '#FF8001', '#FF4000', '#BF2500', '#801500', '#FFFFFF'] const handleClick=(e)=>{ e.preventDefault(); const min1=maxFreq.current.value; const max1=minFreq.current.value; const lmin = Math.log(min1); const lmax = Math.log(max1); let delta = (lmax-lmin)/(n-1); for(let i = 1;i<16 ;i++) { var key11=Math.exp(lmin+delta*(i-1)).toFixed(2); var key21=Math.exp(lmin+delta*((i+1)-1)).toFixed(2) let value1=colors[i]; // console.log(`key1:${key11}\nkey2:${key21}\nvalue:${value1}`) setObj({...obj, key1:key11, key2:key21, value:value1 }); // console.log(obj); setVal(val.concat(obj)); } }cuando estos datos se guardan en la matriz val, solo imprimen el último valor calculado. No proporciona los 16 objetos. Acabo de hacer esto en javascript vainilla. Pero tengo un problema en React js
Esto se debe a que la configuración del valor del estado es async en React . Así que aquí su setVal se comporta de forma asíncrona.
Problema: está utilizando el ciclo y dentro de él, está haciendo
setVal. Pero su ciclo no espera a quesetValcomplete su operación (significa que suvalaún está vacío[]y el ciclo se completa solo). El bucle se ejecuta sin esperar a que se completesetVal. Por lo tanto, hasta la última iteración, suvales[]y es por eso que almacena el valor de la última iteración.
Prueba esto:
const dummyValArr = []; for(let i = 1; i<16; i++) { var key11=Math.exp(lmin+delta*(i-1)).toFixed(2); var key21=Math.exp(lmin+delta*((i+1)-1)).toFixed(2) let value1=colors[i]; const dummyObj = { ...obj, key1:key11, key2:key21, value:value1 } setObj(dummyObj); dummyValArr.push(dummyObj); // just pushing, no async operation here. So it will store all the obj inside dummyValArr } setVal(dummyValArr); // setting it outside the loop