React中用.map()+slice实现产品增量加载的问题求助

你当前实现的核心问题 #

1. 用普通变量let numberOfProductsToShow = 30存储显示数量，React不会监听普通变量的变化触发组件重渲染，修改值后页面不会自动更新
2. 直接操作productList.innerHTML是错误的：React的JSX元素是React节点对象，不是HTML字符串，赋值给innerHTML会把对象强制转为[object Object]字符串，导致显示异常

正确实现方案 #

React是数据驱动视图，只需要把显示数量转为React状态，通过修改状态触发组件重新渲染即可，无需手动操作DOM。

以下是修改后的完整代码：

import React, { useState, useEffect } from 'react'
import productData from './assets/products.json'
import Header from './Header' // 补充Header组件的导入，原代码遗漏

const App = () => {
  const [products, setProducts] = useState([])
  // 用React状态存储显示数量，初始值30
  const [numberOfProductsToShow, setNumberOfProductsToShow] = useState(30)
  
  // 仅在组件挂载时加载一次产品数据，避免无限循环
  useEffect(() => {
    setProducts(productData.products);
  }, [])
  
  const renderProducts = () => {
    // 按当前状态截取产品列表并渲染
    return products.slice(0, numberOfProductsToShow).map(product => (
      <div className='product' key={product.id}>
        <div className='productImage'>
          <img src="" data-src={product.thumbnail} />
        </div>
        <div className='productInfo'>
          <div className='productTitle'>
            <div className='productBrand'>{product.brand}</div> 
            <div className='productName'>{product.title}</div>
          </div>
          <div className='productPrice'>Price: {product.price}</div>
        </div>
      </div>
    ))
  }
  
  const loadMoreProducts = () => {
    // 限制最大显示数量不超过产品总数
    if (numberOfProductsToShow < products.length) {
      // 使用函数式更新，确保基于最新状态修改
      setNumberOfProductsToShow(prevCount => prevCount + 30)
    }
  };
  
  return (
    <div className='shopperApp'>
      <Header />
      <div className='productsList'>
        <div className='products'>
          {renderProducts()}
        </div>        
        {/* 只有还有未显示产品时，才展示加载更多按钮 */}
        {numberOfProductsToShow < products.length && (
          <div className='viewMore'>
            <button onClick={loadMoreProducts}>View More</button>
          </div>
        )}
      </div>
    </div>
  )
}

export default App

关键修改说明 #

1. 状态化管理显示数量：将numberOfProductsToShow转为React状态，通过setNumberOfProductsToShow修改值，自动触发组件重渲染
2. 移除原生DOM操作：删掉所有querySelector、addEventListener、innerHTML相关代码，改用React的onClick事件绑定
3. 优化数据加载：给useEffect添加空依赖数组，确保产品数据只在组件挂载时加载一次
4. 增加边界判断：当显示数量达到产品总数时，隐藏加载更多按钮，避免无效点击
5. 修复拼写错误：原代码中propductsMap的拼写错误改为更清晰的renderProducts

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