React заставляет элементы поменяться местами в списке 2
Я пытаюсь сделать обмен элементами в массиве 2. В пользовательском интерфейсе есть 2 списка, и пользователь выбирает элементы в первом списке, то он должен быть удален из 1-го списка и перемещен во 2-й список, где отображаются выбранные элементы. Проблема, которую я получил, заключается в том, что когда я пытаюсь переместить элементы из 1-го и 2-го списка с помощью setValue, он не меняет значение значения. Функция getIndexA работает, я использую ее, потому что у меня есть массив объектов, а на входе в качестве значения у меня есть свойство объекта (ключ).
(Если я печатаю массив перед удалением объекта и после удаления объекта, я вижу, что массив правильно удаляет объект, но когда я устанавливаюListaFile, он не меняет значения ListaFile (даже если я сниму флажок и перепроверю ввод, я вижу, что array2 состоит из элемент выбран и не определен), так что кажется, что он работает, но в рендеринге я все еще вижу список как тот же, что и при запуске (даже если useState подключен к listaFile с журналом консоли, он не показывает журнал консоли 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.info("array2:",array2);
setFileSelezionati(array2);
}
}
Эта часть находится в return()
<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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
ты можешь сделать это
<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]);
}
}