флажки реагировать на ввод - не переключаться с изменением состояния

Question

У меня проблемы с получением группы флажков для переключения с изменениями в состоянии. Я отображаю флажки с использованием array.map и возвращаю элементы ввода.

Похоже, моя функция handleUpdateCheck обновляет состояние соответствующим образом, но DOM не выполняет повторную визуализацию.

const [checked, updateChecked] = useState([true, true, true, false, false]);

function handleUpdateChecked(index) {
    let newArr = checked;
    newArr[index] = !checked[index]
    updateChecked(newArr);
}

checked.map((box, index) => {
    return (
        <input
            key={index}
            type='checkbox'
            checked={checked[index]}
            onChange ={() => handleUpdateChecked(index)}
        />
    )
})

Спасибо

Answer 1

Я считаю, что проблема, с которой вы сталкиваетесь, заключается в том, что вы непреднамеренно изменяете состояние. Один из способов предотвратить это - создать поверхностную копию массива checked с помощью оператора распространения.

const [checked, updateChecked] = useState([true, true, true, false, false]);

function handleUpdateChecked(index) {
    let newArr = [...checked];
    newArr[index] = !checked[index]
    updateChecked(newArr);
}

checked.map((box, index) => {
    return (
        <input
            key={index}
            type='checkbox'
            checked={checked[index]}
            onChange ={() => handleUpdateChecked(index)}
        />
    )
})