REACT全选单选

身为react初学者，遇到这个问题记录一下，在代码编译器里面可以直接运行，不会存在一点报错，测试了很多遍了，

就不放gif图片了

效果展示：可能不是特别明显

如上图所示

下方是全部代码

1. useState 用于创建状态变量，list 存储列表数据，allChecked 存储全选状态。

2. useEffect 用于监听 list 的变化，根据已选中的列表项数量来更新全选状态。

3. 第二个 useEffect 用于监听全选状态的变化，根据全选状态来更新每个列表项的选中状态。

4. 在渲染部分，通过 list.map 方法循环渲染每个列表项，每个列表项包含一个复选框和一个名称。复选框的选中状态与列表项的 checked 属性绑定，通过 onChange 事件来更新列表项的选中状态。

5. 最后一个 Checkbox 组件是全选复选框，它的选中状态与 allChecked 变量绑定，通过 onChange 事件来更新全选状态。

6. setList 函数用于更新列表数据，通过创建一个新的列表副本并修改相应的项来实现。

总的来说，这段代码演示了如何使用 useState 和 useEffect 来管理组件状态，以及如何使用 react-vant 组件库中的复选框组件来创建一个多选列表。每次用户点击复选框时，都会更新相关的状态以实现选择和取消选择功能。同时，全选复选框也可以控制所有列表项的选中状态。

import React, { useEffect, useState } from "react";
import { Stepper, Checkbox } from "react-vant";
function calculateTotalQuantity(cart) {
  let totalQuantity = 0;
  for (let item of cart) {
    totalQuantity += item.num;
  }
  return totalQuantity;
}
export default function App() {
  const [list, setList] = useState([
    { name: "上官二" },
    { name: "张三" },
    { name: "李四" },
    { name: "王五" },
    { name: "赵六" },
    { name: "李七" },
    { name: "真的是" },
  ]);
  const [allChecked, setAllChecked] = useState(false);
  // useEffect(() => {
  //     // render()
  // }, []);
  useEffect(() => {
    if (list.length === list.filter((item) => item.checked).length) {
      setAllChecked(true);
    } else {
      setAllChecked(false);
    }
  }, [list]);

  useEffect(() => {
    if (allChecked) {
      setList(
        list.map((item) => {
          item.checked = true;
          return item;
        })
      );
    } else {
      setList(
        list.map((item) => {
          item.checked = false;
          return item;
        })
      );
    }
  }, [allChecked]);
  return (
    <div>
      {list.map((item, index) => (
        <div key={item.id}>
          <div style={{ display: "flex" }}>
            <Checkbox
              checked={item.checked}
              onChange={(checked) => {
                setList(() => {
                  let arr = [...list];
                  arr[index].checked = checked;
                  return arr;
                });
              }}
            />
            <div>
              <p>{item.name}</p>
            </div>
          </div>
        </div>
      ))}
      <div>
        <Checkbox
          checked={allChecked}
          onChange={setAllChecked}
          style={{ background: "white" }}
        />
      </div>
    </div>
  );
}

 有什么建议可以在评论区写出来，共同探讨，互相学习。