React hooks，不会将checked属性更改为checkbox

Question

我试图改变ckeckbox属性，每次我写一个新值到地图，在我的情况下，当我点击复选框，它只改变被选中的属性的值，例如，初始值为真，在所有随后的点击它将是假，假，假…这是怎么了?

import React,{ useState,useEffect } from "react";
import {useSelector} from 'react-redux'
const ChangeArticle = (props) => {
const prevArticle = props.changeArtcle;
const age_groups = useSelector(state => state.app.age_groups);
const [checkedAges, setCheckAges] = useState(new Map());
const handleChangeCheckBoxe = (event) => {

setCheckAges(checkedAges => checkedAges.set(event.target.value, event.target.checked));
console.log("checkedItems: ", checkedAges);
}
useEffect(() => {
if(prevArticle.ages){
prevArticle.ages.forEach((age) =>{
setCheckAges(checkedAges => checkedAges.set(age.toString(), true));
});
}

},[prevArticle]);
return (<div>

{age_groups.map(age => {

return (<div key={age.id}>
<input type="checkbox" checked={checkedAges.has(age.id.toString()) ? checkedAges.get(age.id.toString()) : false} value={age.id} onChange={handleChangeCheckBoxe}
/>
{ age.title }
</div>) 

}) }
</div>);
}
export default ChangeArticle;

Answer 1

在handleChangeCheckBoxe函数中，您只更改Map中的值。React只做一个浅层的引用检查来查看Map是否已经更改。因为引用是相同的，所以它不会像你期望的那样重新渲染组件。

您可以像下面这样修改函数来创建一个新的Map并将其分配给state。

const handleChangeCheckBoxe = (event) => {
setCheckAges(checkedAges => new Map(checkedAges.set(event.target.value, event.target.checked)));
console.log("checkedItems: ", checkedAges);
}

您可以在以下代码沙盒https://codesandbox.io/s/wispy-leftpad-9sji0?fontsize=14&hidenavigation=1&theme=dark

中看到它的工作情况