React点击单个子分类却获取多个结果的问题求助

• 问题现象：点击单个子分类时，会获取到同一主分类下所有子分类的内容。比如Electronic分类下的Mobile和Gadget，点击Mobile时，控制台会同时输出Mobile和Gadget的文本。

截图显示：Electronic分类展开后，Mobile和Gadget两个子分类并排显示，点击其中任意一个时，控制台输出两个子分类的完整文本。

组件代码 #

PostSingleAd 组件 #

const PostSingleAd = ({ data, itemOpenedId, setItemOpenedId,setText }) => {
  const [showsubcat, setShowSubCat] = useState(false);

  let subcategory = () => {
    setShowSubCat((prev) => !prev);
    setItemOpenedId(data.id);
    setText(data.main_category)
  };
   let subclick = (e)=>(
       
       console.log(e.currentTarget.textContent)
  )
  useEffect(() => {
    if (itemOpenedId !== data.id) {
      setShowSubCat(false);
    }
  }, [itemOpenedId]);



 return (
    <>
      <li class="list-group-item" id="category" onClick={subcategory}>
        {data.main_category}
      </li>
      {showsubcat && (
        <li onClick={subclick}>
           {data.sub_cat_bp.map((data)=>(<> 
          <i class="las la-angle-right" id="sub_category"></i>{" "}
          {data.sub_category}
          </>) 
        </li>
      )}
    </>
  );
};

PostAds 组件 #

const PostAds = () => {
  const [itemOpenedId, setItemOpenedId] = useState();
  const[text,setText] = useState();
  console.log(text)
  return data.map((data) => (
    <PostSingleAd
      data={data}
      itemOpenedId={itemOpenedId}
      setItemOpenedId={setItemOpenedId}
      setText={setText}

    />
  ));
};

API数据格式 #

[
  {
    "main_category": "Electronic",
    "sub_cat_bp": [
      {
        "sub_category": "Mobile",
        "id": 1
      },
      {
        "sub_category": "Gadget",
        "id": 2
      }
    ]
  },
  {
    "main_category": "Car",
    "sub_cat_bp": [
      {
        "sub_category": "Car glass",
        "id": 3
      },
      {
        "sub_category": "Dorr brll",
        "id": 4
      }
    ]
  }
]

问题原因及修复方案 #

原因 #

所有子分类被包裹在同一个<li>标签中，点击该标签时，e.currentTarget.textContent会获取到整个标签内的所有文本内容，导致多个子分类的文本被同时输出。

修复步骤 #

1. 给每个子分类单独设置可点击的容器，让每个子分类成为独立的点击目标；
2. 直接传入子分类数据到点击函数，避免依赖事件对象获取文本的不确定性。

修改后的PostSingleAd组件代码：

const PostSingleAd = ({ data, itemOpenedId, setItemOpenedId, setText }) => {
  const [showsubcat, setShowSubCat] = useState(false);

  const subcategory = () => {
    setShowSubCat(prev => !prev);
    setItemOpenedId(data.id);
    setText(data.main_category);
  };

  // 直接接收子分类数据，无需依赖事件对象
  const subclick = (subCat) => {
    console.log(subCat.sub_category);
    // 可在此添加选中子分类的逻辑，比如设置选中文本
    // setText(subCat.sub_category);
  };

  useEffect(() => {
    if (itemOpenedId !== data.id) {
      setShowSubCat(false);
    }
  }, [itemOpenedId]);

  return (
    <>
      <li className="list-group-item" id="category" onClick={subcategory}>
        {data.main_category}
      </li>
      {showsubcat && (
        <ul> {/* 用ul包裹子分类，符合HTML语义规范 */}
          {data.sub_cat_bp.map((subCat) => (
            <li key={subCat.id} onClick={() => subclick(subCat)}>
              <i className="las la-angle-right" id="sub_category"></i>{" "}
              {subCat.sub_category}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};

额外优化点 #

• React中推荐使用className替代class，避免与JS的class关键字冲突；
• 循环渲染子分类时添加key属性，符合React规范，避免控制台警告；
• 函数声明改用const，更贴合函数式编程最佳实践。

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