0

我正在学习如何在反应中使用多个复选框。我使用钩子 UseState。状态是对象数组。当我单击复选框时，状态已更改并且 UI 渲染正常。但是当我打开 chrome 开发工具时，无论我点击什么，检查的属性都保持不变。这是正确的行为吗？

const arr_resting_ru = [
    { id: "rest1", value: "Walking", isChecked: false },
    { id: "rest2", value: "Running", isChecked: true}
];

const [resting, setResting] = useState(arr_resting_ru);

const handlerCheckBoxRest=(id)=> {
    setResting((prevState)=>{

           return prevState.map((chbox)=>{
                if(chbox.id===id) return {...chbox, isChecked:!chbox.isChecked}
                else {return chbox;}
            })

        });
}

 <div className="rest-checkbox-create-profile">
                    <div className='text-under-custom-menu'>
                        Rest:
                    </div>

                    {resting.map((rest, index) => {
                        if(rest.isChecked===true) console.log(rest.value);
                        return <p key={index}>
                                <input type='checkbox' checked={rest.isChecked} 
                                onChange={()=>handlerCheckBoxRest(rest.id)} />
                                {rest.value}
                                </p>
                            
                        })
                    }

                </div>

在 chrome 开发工具中检查的属性没有改变，但状态和 UI 是正常的

当我设置 defaultChecked 时，一切都很好。但我认为这是错误的方式

4

0 回答 0