时间戳

首页 > 解决方案 > 无法在基于事件的函数中更新数组类型的 useState

javascript - 无法在基于事件的函数中更新数组类型的 useState

问题描述

我是一个初学者，目前对 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 向状态数组添加元素。我以前也遇到过这种问题，找不到解决办法，每次都选择另一种方式来解决。但现在我真的需要了解发生了什么问题..

标签： javascriptreactjsuse-state

解决方案

您不需要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))
    }
}

像这样的东西

推荐阅读