1. import React, { useEffect, useState } from "react";
2. import { Stepper, Checkbox } from "react-vant";
3. function calculateTotalQuantity(cart) {
4.   let totalQuantity = 0;
5. for (let item of cart) {
6.     totalQuantity += item.num;
7.   }
8. return totalQuantity;
9. }
10. export default function App() {
11.   const [list, setList] = useState([
12.     { name: "上官二" },
13.     { name: "张三" },
14.     { name: "李四" },
15.     { name: "王五" },
16.     { name: "赵六" },
17.     { name: "李七" },
18.     { name: "真的是" },
19.   ]);
20.   const [allChecked, setAllChecked] = useState(false);
21. // useEffect(() => {
22. //     // render()
23. // }, []);
24.   useEffect(() => {
25. if (list.length === list.filter((item) => item.checked).length) {
26.       setAllChecked(true);
27.     } else {
28.       setAllChecked(false);
29.     }
30.   }, [list]);
31. 
32.   useEffect(() => {
33. if (allChecked) {
34.       setList(
35.         list.map((item) => {
36.           item.checked = true;
37. return item;
38.         })
39.       );
40.     } else {
41.       setList(
42.         list.map((item) => {
43.           item.checked = false;
44. return item;
45.         })
46.       );
47.     }
48.   }, [allChecked]);
49. return (
50. <div>
51.       {list.map((item, index) => (
52. <div key={item.id}>
53. <div style={{ display: "flex" }}>
54. <Checkbox
55.               checked={item.checked}
56.               onChange={(checked) => {
57.                 setList(() => {
58.                   let arr = [...list];
59.                   arr[index].checked = checked;
60. return arr;
61.                 });
62.               }}
63. />
64. <div>
65. <p>{item.name}</p>
66. </div>
67. </div>
68. </div>
69.       ))}
70. <div>
71. <Checkbox
72.           checked={allChecked}
73.           onChange={setAllChecked}
74.           style={{ background: "white" }}
75. />
76. </div>
77. </div>
78.   );
79. }