Estoy tratando de hacer un intercambio de elementos en 2 matrices. Hay 2 listas en la interfaz de usuario y el usuario selecciona los elementos en la primera lista, luego debe eliminarse de la primera lista y moverse a la segunda lista, donde se muestran los elementos seleccionados. El problema que tengo es que cuando trato de mover los elementos de la primera y segunda lista con setValue, no cambia el valor del valor. La función getIndexA funciona, la uso porque tengo una matriz de objetos y en la entrada como valor tengo una propiedad del objeto (la clave).
(Si imprimo la matriz antes de eliminar el objeto y después de eliminar el objeto, veo que la matriz está eliminando correctamente el objeto, pero cuando configuro ListaFile no cambia los valores de ListaFile (incluso si desmarco y vuelvo a verificar la entrada, veo que array2 está hecho de el elemento seleccionado e indefinido) por lo que parece funcionar, pero en el renderizado todavía veo la lista como la misma de inicio (incluso con un estado de uso conectado a listaFile con un registro de consola, no muestra el registro de consola de listaFile)
const [fileSelezionati,setFileSelezionati] = useState([]); const [listaFile,setListaFile] = useState([]); function handleCheck(e){ if(e.target.checked){ var array = listaFile; var item = listaFile[getIndexA(listaFile,e.target.value)]; array.splice(getIndexA(listaFile,e.target.value),1); setListaFile(array); var array2 = fileSelezionati; array2.push(item); console.log("array2:",array2); setFileSelezionati(array2); } }Esta parte está en la devolución()
<ul> { listaFile.map((file,index)=>{ return <div key={file.key}><input type="checkbox" value={file.key} onChange={(e)=>handleCheck(e)}/> {file.key}</div> }) } </ul> <label>File selezionati:</label> <ul> { fileSelezionati.map((file,index)=>{ return <div><input key={file.key} type="checkbox" value={file.key} checked={true}>{file.key}</input></div> }) } </ul>Puedes hacerlo
<ul> { listaFile.map((file,index)=>{ return <div key={file.key}><input type="checkbox" value={file.key} onChange={(e)=>handleCheck(file.key, e.target.checked)}/> {file.key}</div> }) } </ul> <label>File selezionati:</label> <ul> { fileSelezionati.map((file,index)=>{ return <div><input key={file.key} type="checkbox" value={file.key} checked={true}>{file.key}</input></div> }) } </ul> const [fileSelezionati,setFileSelezionati] = useState([]); const [listaFile,setListaFile] = useState([]); function handleCheck(key, checked){ if(checked){ const item = listaFile.find(f => f.key === key) setListaFile(listaFile.filter(f => f.key !== key)); setFileSelezionati([...fileSelezionati, item]); } }