React组件useEffect监听全局Set变量变化及修改后报错解决方案咨询

• 全局Set无法触发更新的原因：React组件重渲染仅由自身state或接收的props变化触发，你声明的全局ProcessSet属于普通JS变量，就算内部值修改，引用地址没有变化，PROCESS_COMPONENT的useEffect依赖检测不到变化，自然不会更新状态。
• 修改为状态后报错的原因：Set.prototype.delete()方法的返回值是布尔值（表示删除是否成功），而非修改后的Set本身。你执行setPSet(pset.delete(lID))时相当于把布尔值赋值给了processSet状态，后续再调用pset.add自然会提示方法不存在。

1. Listings 组件逻辑（核心思路无需调整，仅做细节优化） #

import React, { useState } from "react";
import { CheckBox, PROCESS_COMPONENT } from "./Process.jsx";

const ListItem = ({lItem, processSet, setProcessSet}) => {
    return (
            <>
               {/* name,image,info,etc. */}
               <CheckBox lID={lItem.id} setProcessSet={setProcessSet} />
            </>
)
};

function Listings() {
  // 定义Set类型的状态
  const [processSet, setProcessSet] = useState(new Set());
  // 此处替换为你实际的dataArray定义
  const dataArray = [];
 return (
       <>
          {/* 把Set作为props传给处理组件 */}
          <PROCESS_COMPONENT selectedSet={processSet} />
          {/*..some divs and headings */}
          {dataArray.map(item => { 
            return <ListItem 
                    key={item.id} 
                    lItem={item} 
                    processSet={processSet} 
                    setProcessSet={setProcessSet} 
                   /> 
          })}
       </>
)
}

2. Process.jsx 逻辑修改 #

import React, { useState } from "react";

const CheckBox = ({lID, setProcessSet}) => {
   const [isTicked, setTicked] = useState(false);
   const onTick = () => {
     const newTicked = !isTicked;
     setTicked(newTicked);
     // 用函数式更新获取最新的Set，拷贝后修改再返回新引用
     setProcessSet(prevSet => {
       const updatedSet = new Set(prevSet);
       if(newTicked) {
         updatedSet.add(lID);
       } else {
         updatedSet.delete(lID);
       }
       return updatedSet;
     })
   };

   return (
      <div onClick={onTick}>
       {/* 复选框展示内容 */}
      </div>
   )
}

const PROCESS_COMPONENT = ({selectedSet}) => {
   // 不需要单独存len状态，直接用传入的Set的size即可，状态变化会自动重渲染
   return (
        <div>
          <h6> {selectedSet.size} items checked </h6>
        </div>
   )
}

export { CheckBox, PROCESS_COMPONENT };

• 每次修改Set时都先基于旧值拷贝生成新的Set实例，保证状态引用发生变化，触发React的更新检测
• 使用函数式更新setProcessSet(prev => ...)避免闭包问题，确保每次拿到的都是最新的Set值
• PROCESS_COMPONENT直接消费传入的Set状态，不需要额外维护内部状态，减少冗余代码

内容的提问来源于stack exchange，提问作者Rakshit Shetty