无法更新基于事件的函数中if条件内部数组类型的useState

Question

我是一个初学者，目前对javascript和react都很感兴趣。我一直在尝试实现多个复选框，每次选中复选框时，名称都会添加到useState变量(数组(中。

const [members, setMembers] = useState([])
let selectedMembers = []
const handleCheck = (e) => {
if(e.target.checked){
selectedMembers.includes(e.target.name) === false && selectedMembers.push(e.target.name)
console.log(selectedMembers,"one")
}else if(e.target.checked === false){
const sm = selectedMembers.filter((itm)=>itm !== e.target.value )
selectedMembers = sm
}
// here we have the array of all the names selected which is updated every time it is selected
console.log(selectedMembers)
//but when I add this line here, it only shows the last element in the array everytime it is checked
setMembers(selectedMembers)
console.log(members)
}

//My html code is soemthing like this for all checkboxes
<input type="checkbox" name="Sima Rana"  id="edit-two" onChange={(e)=>handleCheck(e)}/>}
<label htmlFor="edit-two" className="wp d-flex flex-row align-items-center">

问题是，我不能让useState将元素添加到状态数组中。我以前遇到过这种问题，找不到解决方案，每次都选择了另一种方式。但现在我真的需要明白出了什么问题。。

Answer 1

您不需要辅助变量selectedMembers，它应该会引起您的问题。

尝试更改所有逻辑以使用状态。

const [members, setMembers] = useState([])
const handleCheck = (e) => {
if(e.target.checked && members.includes(e.target.name) === false){
setMembers([
...members,
e.target.name,
])
} else if(e.target.checked === false){
setMembers(member.filter((itm)=>itm !== e.target.value))
}
}

像这样的