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

像这样

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

1 个答案: