React实现全选/取消全选复选框列表功能异常问题求助

问题原因 #

事件处理函数的条件分支结构存在错误：两个if判断为并行执行逻辑，当你在全选状态下取消普通项勾选时，仅会触发「把全选框设为未勾选」的逻辑，不会同步修改当前点击项的勾选状态，因此出现取消操作不生效的问题。

修复后代码 #

interface ContainerProps {
  name: string;
  flag: boolean;
}

const initList: ContainerProps[] = [
  {name: "ALL", flag: false},
  {name: "First item", flag: false},
  {name: "Second item", flag: false},
  {name: "Third item", flag: false},
  {name: "Fourth item", flag: false},
]
const PodCounter: React.FC = () => {
  const [propsList, setList] = useState(initList)
  
  const onClick = (value: string, check: boolean) => {
    const tempList = [...propsList]
    if (value === "ALL") {
      // 点击全选框时同步所有项的勾选状态
      tempList.forEach(item => item.flag = check)
    } else {
      // 点击普通项时先修改当前项的勾选状态
      tempList.forEach(item => {
        if (item.name === value) item.flag = check
      })
      // 再判断所有普通项是否全部勾选，同步全选框状态
      const allChecked = tempList.slice(1).every(item => item.flag)
      tempList[0].flag = allChecked
    }
    setList(tempList)
  }

  return (
      <IonList>
        {/* 把key从index替换为唯一的name，避免渲染异常 */}
        {propsList.map((obj)=>(
                  <IonItem key={obj.name}>
                    <IonLabel>{obj.name}</IonLabel>
                  <IonCheckbox slot="end" value={obj.name} checked={obj.flag} onIonChange={e => onClick(e.detail.value, e.detail.checked)}></IonCheckbox>
                </IonItem>
        ))}
      </IonList>
  );
};

内容的提问来源于stack exchange，提问作者J.Soto