不使用useState实现Checkbox控制元素显隐（基于useContext数据）

问题原因 #

你当前代码里的 hasMoaDelegate 和 hasMoaAssistant 是普通局部变量，修改它们不会触发 React 组件重新渲染，所以勾选/取消勾选后页面不会更新。要实现响应式效果，必须修改上下文（Context）中的状态——React 只有在状态或上下文变化时才会重新渲染组件。

修正步骤 #

1. 确保上下文提供状态更新方法：确认你的 OutletPpspsContext 包含更新 ppsps 状态的方法（比如 setPpsps）。如果没有，需要在上下文的提供者组件中添加对应的状态管理逻辑（用 useState 或其他状态工具）。
2. 将复选框改为受控组件：把 defaultChecked 替换为 checked，直接使用上下文的值控制复选框状态。
3. 勾选变更时更新上下文状态：修改 onCheckedChange 函数，直接更新上下文里的 moa 属性，触发组件重新渲染，进而更新元素的显示/隐藏状态。

修正后的代码 #

export default function Moa() {
  const { ppsps, setPpsps } = useOutletContext<OutletPpspsContext>();
  const { moa } = ppsps.generalInformation;
  const hasMoaDelegate = !!moa?.isDelegatedProjectOwnerContacts;
  const hasMoaAssistant = !!moa?.isAssistantProjectOwnerContacts;

  function onCheckedChange(checkedElement: CheckedElement) {
    const { id, checked } = checkedElement;
    
    // 映射复选框ID到上下文对应属性
    const propName = id === 'moaDelegate' 
      ? 'isDelegatedProjectOwnerContacts' 
      : 'isAssistantProjectOwnerContacts';

    // 更新上下文状态
    setPpsps(prev => ({
      ...prev,
      generalInformation: {
        ...prev.generalInformation,
        moa: {
          ...prev.generalInformation.moa,
          [propName]: checked
        }
      }
    }));
  }

  return (
    <div>
      <GroupCheckbox
        onCheckedChange={onCheckedChange}
        className="flex gap-8"
        onlyChangedItem
        onlyValues={false}
      >
        <InputCheckbox
          id="moaDelegate"
          name="moaDelegate"
          checked={hasMoaDelegate} // 改为受控属性
        />
        <InputCheckbox
          id="moaAssistant"
          name="moaAssistant"
          checked={hasMoaAssistant} // 改为受控属性
        />
      </GroupCheckbox>

      {hasMoaDelegate && <p>moa delegate</p>}
      {hasMoaAssistant && <p>moa assistant</p>}
    </div>
  );
}

补充说明 #

如果你的上下文没有提供 setPpsps 方法，需要在上下文提供者组件中添加状态管理，示例如下：

// 上下文提供者组件示例
export function PpspsProvider({ children }: { children: React.ReactNode }) {
  const [ppsps, setPpsps] = useState<OutletPpspsContext['ppsps']>(initialValue);
  return (
    <OutletPpspsContext.Provider value={{ ppsps, setPpsps }}>
      {children}
    </OutletPpspsContext.Provider>
  );
}

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