复选框未在反应表中更新

Question

最近我一直在学习并努力做出反应。使用react-table组件创建表时，我在添加到表头的复选框时遇到了问题。

我的主要问题是复选框具有堰式行为，并且没有像必须的那样得到检查。

我试图使用useState钩子保存在状态对象上检查的项目。

const [selected, setSelected] = useState([]);

这里是标题：

{
     Header: "CheckBox",
     accessor: "",
     Cell: ({ row }) => {
      return(<input 
              type="checkbox"
              checked={!isChecked(row.original)}
              onChange={() => checkBoxHandler(row.original)}/>
      )
     }
}

这是函数checkBoxHandler（）

const checkBoxHandler = (row) =>{
        if(!isChecked(row)){
            const arr = [...selected];
            arr.push(row);
            selected(arr); 
        }
        else{
            const arr = [...selected];
            arr.splice(selected.indexOf(row),1);
            setSelected(arr);
        }
    }

这是isChecked（）函数

const isChecked = (row) =>{
        return (selected.includes(row));

    }

我想知道我的逻辑是否有问题或有更有效的方法来实现这一点

Answer 1

看起来好像只是一个错字。选中处理程序中的复选框时，您不会调用setSelected。

const checkBoxHandler = (row) =>{
    if(!isChecked(row)){
        const arr = [...selected];
        arr.push(row);
        selected(arr);              // <--- here, should this also be setSelected?
    }
    else{
        const arr = [...selected];
        arr.splice(selected.indexOf(row),1);
        setSelected(arr);
    }
}