Чекбокс не обновляется в таблице реакции

Question

В последнее время я учился и работал над реакцией. При создании таблицы с использованием компонента таблицы реакции я столкнулся с проблемой с флажком, который я добавил в заголовки таблицы.

Моя основная проблема в том, что флажки имеют странное поведение и не проверяются как и должно быть.

Я попытался сохранить проверенные мной элементы на объекте состояния с помощью хука 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);
            setSelected(arr); 
        }
        else{
            const arr = [...selected];
            arr.splice(selected.indexOf(row),1);
            setSelected(arr);
        }
    }

А это функция isChecked ()

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

    }

Я хотел бы знать, если мой лог c есть проблема или есть более эффективный способ реализовать это

Answer 1

Похоже, это просто опечатка. Вы не вызываете setSelected при установке флажка в обработчике.

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