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)}
        />
    )
})

反应输入复选框-不切换状态变化

1 个答案: