Javascript 如何使用useState切换所有复选框？

我有一个代码来切换表中的所有复选框，如下所示：

const tblData = dummyData;
const [ allToggled, setAllToggled ] = useState(false);
const [ toggled, setToggled ] = useState(false);

const handleToggleAll = allToggled => {
    let selectAll = !allToggled;
    setAllToggled(selectAll);
    let toggledCopy = [];
    tblData.forEach(function (e, index) {
        toggledCopy.push(selectAll);
    });
    setToggled(toggledCopy);
}

const handleToggle = index => {

    let toggledCopy = toggled;
    setToggled[index] = toggled[index];
    if( toggledCopy[index] === false ){
        setAllToggled(false);
    }
}

和反应台部分：

        Header: state => (
            <input
                type="checkbox"
                checked={allToggled}
                onChange={() => handleToggleAll(allToggled)}
            />
        ),
        Cell: row => (
            <input
                type="checkbox"
                checked={toggled[row.index]}
                /> 
       )

Header:state=>(
handleToggleAll（所有切换）}
/>
),
单元格：行=>(
)

---

一切正常，直到我使用

handleToggleAll

。它会将所有复选框切换到

true

状态，但当我取消选中

handleToggleAll

时，我无法将它们设置回

true

也无法选中任何单个复选框。

这很奇怪-我选中并切换了所有复选框，但普通切换无法正常工作，也不能像您那样不要在代码中调用setToggled…这应该可以正常工作

const tblData = [1, 2, 3, 4];

const [ allToggled, setAllToggled ] = useState(false);
const [ toggled, setToggled ] = useState(
  Array.from(new Array(tblData.length), () => false)
);

const handleToggleAll = allToggled => {
  let selectAll = !allToggled;
  setAllToggled(selectAll);
  let toggledCopy = [];
  tblData.forEach(function (e, index) {
      toggledCopy.push(selectAll);
  });
  setToggled(toggledCopy);
}

const handleToggle = index => {
  let toggledCopy = [...toggled];
  toggledCopy[index] = !toggledCopy[index];
  setToggled(toggledCopy);
  if (toggledCopy.every(v => v)) {
    setAllToggled(true);
  } else if (allToggled) {
    setAllToggled(false);
  }
}

---

setToggled

是一个函数，您可以将其用作数组

setToggled[index]

Great。我知道我在哪里犯了错误。