React中Hooks完全不渲染，电商网站点击分类无法加载对应商品

核心逻辑错误 #

你混淆了React声明式开发规范与原生DOM操作逻辑，React不推荐直接使用document.createElement、append等原生方法修改DOM，所有UI渲染逻辑都应通过状态管理和JSX返回实现，这是代码无法运行的核心原因。

各组件具体问题 #

1. NavBar组件问题 #

• 两个useEffect都没有配置依赖数组，组件每次渲染都会重复执行接口请求、重复创建DOM元素，最终会导致页面卡顿甚至崩溃
• 手动创建input、label等导航元素的操作不符合React规范，应将请求到的分类数据存入state，直接在返回的JSX中遍历生成导航项
• 单选框的点击切换事件被注释，没有实现分类切换触发商品更新的逻辑
• 单选框是表单元素，不存在href属性，添加后不会生效
• label元素本身没有checked属性，给label赋值checked的操作无效

2. AllItems组件问题 #

• fetchQuery直接写在组件体中，组件每次渲染都会重复发起商品查询请求，应将请求逻辑放到带依赖项的useEffect中
• forEach循环中写的<ItemCard />没有任何渲染入口，既没有存入状态也没有插入到返回的JSX结构中，完全不会在页面显示
• 直接通过document.getElementById获取单选框选中状态的操作不符合React规范，应通过公共状态传递当前选中的分类
• GraphQL查询没有传入分类参数，每次请求返回的都是固定分类的商品数据，无法根据选中分类动态拉取对应商品
• 返回的容器div为空，没有渲染任何商品卡内容

3. 通用问题 #

• 缺少公共状态管理：当前选中的分类是NavBar和AllItems组件需要共享的状态，你没有通过useState、Context或状态管理库存储该状态，两个组件无法通信
• 若fetchQuery、getSymbolFromCurrency是自定义工具函数，需确认已正确导入对应组件，否则会抛出未定义错误
• 多个重复id：所有ItemCard都用了固定的item-nameid，不符合HTML规范，会导致DOM选择异常

基础修正思路 #

1. 在公共父组件（如App组件）中用useState存储currentCategory状态，向NavBar传递状态修改方法，向AllItems传递当前选中的分类值
2. NavBar中请求分类列表存入state，遍历state渲染导航单选框与标签，选中值绑定currentCategory，点击切换时修改公共状态
3. AllItems中把currentCategory作为useEffect的依赖项，每次分类变化时携带分类参数请求对应商品，将返回的商品列表存入state，遍历state渲染ItemCard组件

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