React修改布尔状态变量导致父组件消失问题排查

点击按钮后整页消失是React渲染阶段抛出未捕获错误，导致组件树整体卸载，和三元表达式控制显隐的逻辑无关，核心错误出在AddToWardrobe组件的JSX写法上：

• HTML中<input>属于空元素（自闭合标签），不支持包裹子节点。你在checkbox类型的input标签中间直接写了"Accessory""Top"这类文本内容，React解析DOM结构时会直接抛出语法错误，这是白屏的直接诱因。
• 存在状态类型不匹配的隐患：itemType初始值定义为字符串数组string[]，但handleTypeSet方法里给setItemType传入的是e.target.checked布尔值，后续操作复选框时也会触发类型报错。
• 额外检查WhatDo组件中用到的postNewItem、signOut两个方法，需要确保已经正确导入或在组件内定义，否则也会触发引用不存在变量的错误导致白屏。

1. 先修正致命的input标签写法，把所有带子文本的checkbox改成自闭合形式，文本放到label标签内和input关联，替换原来的复选框代码：

<div className="ATW__input">
  <label>
    <input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox} />
    Accessory
  </label>
  <label>
    <input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox} />
    Top
  </label>
  <label>
    <input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox} />
    Bottom
  </label>
  <label>
    <input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox} />
    Shoes
  </label>
</div>

2. 修正handleTypeSet的状态更新逻辑，保证类型匹配，同时正确维护选中值的数组：

const handleTypeSet = (e: React.ChangeEvent<HTMLInputElement>) => {
  const typeValue = e.target.value;
  const isChecked = e.target.checked;

  // 同步单个复选框的选中状态
  switch(typeValue) {
    case "Accessory":
      setAccessoryBox(isChecked);
      break;
    case "Top":
      setTopBox(isChecked);
      break;
    case "Bottom":
      setBottomBox(isChecked);
      break;
    case "Shoes":
      setShoeBox(isChecked);
      break;
  }

  // 更新itemType选中值数组
  setItemType(prev => isChecked ? [...prev, typeValue] : prev.filter(item => item !== typeValue));
}

改完这两处后，点击按钮就能正常渲染AddToWardrobe组件，不会再出现整页消失的问题，剩下未完成的表单逻辑可以后续逐步补充。

内容的提问来源于stack exchange，提问作者clairely-u