React.js中NavBar组件的onclick事件无法渲染AllItems组件如何解决

问题根因 #

你当前写法不生效的核心原因有两个：

• React仅会解析渲染组件return语句中返回的JSX，事件处理函数内的JSX会被直接丢弃，不会有任何渲染效果
• 跨组件共享的「选中分类」状态没有提升到公共父层，两个组件之间没有联动的数据通道

修复方案 #

1. 新增公共父组件管理共享状态 #

创建App.js作为公共父组件，存放选中分类的状态，同时承载NavBar和AllItems的渲染逻辑：

import { useState } from 'react'
import NavBar from './NavBar'
import AllItems from './AllItems'

function App() {
  // 管理当前选中的分类，初始值可在加载分类后设置为第一个分类
  const [selectedCategory, setSelectedCategory] = useState('')

  return (
    <div className="App">
      {/* 将修改分类的方法传递给导航栏 */}
      <NavBar onCategoryChange={setSelectedCategory} />
      {/* 选中分类后渲染商品列表，同时把分类传给商品组件 */}
      {selectedCategory && <AllItems category={selectedCategory} />}
    </div>
  )
}

export default App

2. 修改NavBar.js #

接收父组件传递的修改分类的方法，删除onClick中无用的<AllItems/>代码：

// 接收父组件传的回调方法
function NavBar({ onCategoryChange }) {
  const [allCategories, setAllCategories] = useState([])
  const [currency, setCurrency] = useState([])
    
  // 原有useEffect获取分类、货币的逻辑保持不变
  useEffect(() => {
    fetchAnyQuery(
      `query{
        categories{
          name
        }
      }`
    ).then(data => {
      const categories = data.data.categories
      setAllCategories(categories)
      // 默认选中第一个分类
      if (categories.length > 0) {
        onCategoryChange(categories[0].name)
      }
    })
  },[onCategoryChange])

  useEffect(() => {
    fetchAnyQuery(`
      query{
        currencies
      }
    `).then(data => {
      setCurrency(data.data.currencies)
    })
  },[])


  return (
    <nav id = "NavBar">
      <div id="NavBar-content">
        <div className = "leftSide" id = "leftNav">
          {allCategories.map((category, index) => {
            return(
              <React.Fragment key={category.name}>
                <input 
                  className='radio-category' 
                  id={category.name} 
                  type='radio' 
                  name="nav" 
                  defaultChecked={index === 0}
                  onClick={() => {
                    console.log("ssss")
                    // 调用父组件方法更新选中分类
                    onCategoryChange(category.name)
                  }}
                />
                <label htmlFor={category.name} className='category-label'>
                  <h5 className="tab-text">{category.name.toUpperCase()}</h5>
                </label>
              </React.Fragment>
            )
          })}
        </div>
        {/* 原有中间、右侧导航逻辑保持不变 */}
        <div className = "centerSide">
          <button onClick={() => console.log(getCategoryState())}>
            Abo Kalb
          </button>
        </div>
        <div className = "rightSide">
          <select className="currencySelector" id="currencySelector">
            {currency.map((currency, index) =>{
              return(
                <option key={index} value={index}>
                  {getSymbolFromCurrency(currency) + " " + currency}
                </option>
              )
            })}
          </select>
        </div>
      </div>
    </nav>
  )
}

export default NavBar

3. 修改AllItems.js #

接收父组件传递的分类参数，监听分类变化自动请求对应分类的商品：

// 接收选中的分类参数
function AllItems({ category }) {
  const [products, setProducts] = useState([])

  // 分类变化时自动重新请求对应商品
  useEffect(() => {
    if (!category) return
    fetchAnyQuery(
      `query{
        categories(filter: {name: "${category}"}){
          name
          products{
            name
            id
          }
        }
      }`
    ).then(data => {
      setProducts(data.data.categories[0]?.products || [])
    })
  },[category])

  return (
    <>
      <h1>{category}</h1>
      <div className="itemContainer" id="itemContainer">
        {/* 渲染商品列表 */}
        {products.map(product => (
          <div key={product.id} className="product-item">
            {product.name}
          </div>
        ))}
      </div>
    </>
  )
}

export default AllItems

核心注意点 #

• 所有渲染逻辑都要通过状态驱动，不要在事件函数中直接写JSX
• 多组件共享的状态需要提升到最近的公共父组件管理，通过props传递实现组件联动
• useEffect的依赖项要包含所有用到的外部变量，保证状态变化时逻辑自动重新执行

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