Javascript 无法选中物料界面中循环中的复选框

我使用的是材质UI和React挂钩。我正在运行一个循环，其中我正在打印复选框。我无法选中或取消选中它们。它们似乎是只读的。当我点击它们时，什么也没有发生。我登录控制台查看，挂钩工作正常，

selectedExpertArr

状态得到正确更新，但未选中复选框

代码如下：

const [selectedExpertArr, setSelectedExpertArr] = useState([]);

处理函数如下所示：

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

         <DialogContent>
                <List>
                    {expertNames.map(expert => (
                    <ListItem button key={expert.id}>
                        <Checkbox
                            checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }
                            name="expertCheckbox"
                            onChange={handleSelectedExperts}
                            value={expert.id}
                            color="primary"
                            inputProps={{ 'aria-label': 'expert checkbox' }}
                        />
                        <ListItemText primary={expert.username} />
                    </ListItem>
                    ))}
                </List>
        </DialogContent>

循环代码如下所示：

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

         <DialogContent>
                <List>
                    {expertNames.map(expert => (
                    <ListItem button key={expert.id}>
                        <Checkbox
                            checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }
                            name="expertCheckbox"
                            onChange={handleSelectedExperts}
                            value={expert.id}
                            color="primary"
                            inputProps={{ 'aria-label': 'expert checkbox' }}
                        />
                        <ListItemText primary={expert.username} />
                    </ListItem>
                    ))}
                </List>
        </DialogContent>

{expertNames.map（expert=>(
-1） ？真：假}
name=“expertCheckbox”
onChange={handleSelectedExperts}
值={expert.id}
color=“primary”
inputProps={{“aria标签”：“专家复选框”}
/>
))}

e.target.value是字符串类型，但似乎

expert.id

是数字。因此，您要添加到

ClonedExpertar

字符串，但要搜索数字

（选择ExpertArr.indexOf（expert.id）>-1）

要更正，请将

e.target.value

转换为带有

+e.target.value

更正后的代码将被删除

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(+e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== +e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

---

工作

我想问题在于如何从钩子中的目标获取值。 使用箭头函数在循环中传递，如

  <DialogContent>
            <List>
                {expertNames.map(expert => (
                <ListItem button key={expert.id}>
                    <Checkbox
                        checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }
                        name="expertCheckbox"
                        onChange={(e)=> {handleSelectedExperts(e, expert.id)}}
                        value={expert.id}
                        color="primary"
                        inputProps={{ 'aria-label': 'expert checkbox' }}
                    />
                    <ListItemText primary={expert.username} />
                </ListItem>
                ))}
            </List>
    </DialogContent>

---

希望对您有用：）

这是因为

clonedexpertar.push（e.target.value）

将值保存为字符串，您在这里比较一个数字

 checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }