javascript 设置 .map() 范围并稍后更新范围

Question

我正在使用 React 和 JS 构建一个应用程序，它从组件内的 json 列表返回产品，该数组使用

.map()

数组输出到应用程序上。我还使用

.slice(0, 30)

来限制地图中最初返回的金额，以返回前 30 个产品。

但是，我还希望能够稍后单击按钮来更新范围，然后加载 60 个产品（包括接下来的 30 个产品和原始 30 个产品）：

products.slice(0, 60).map(product => (......));

（

products

。只是在我的代码中存储 json 数组的变量）

我不知道是否有办法用新的切片数量更新或重新加载地图，或者是否有比使用

.slice()

更好的方法？

我尝试向按钮添加一个单击事件，该按钮运行一个函数，该函数更新包含要返回的最大产品数量的变量

let numberOfProductsToShow  = 30

，该变量采用原始数字并添加 30

numberOfProductsToShow = numberOfProductsToShow + 30;

，然后使用更新后的内容再次运行相同的函数传递给切片的最大值

.slice(0, numberOfProductsToShow)

。

    const productList = document.querySelector('.productsList .products');
    productList.innerHTML = propductsMap(0, numberOfProductsToShow);

但这只会返回单词

[object Object],[object Object],[object Ob...etc

60 次，所以这显然是不正确的。

我在搜索时找不到解决方案，因此非常感谢任何帮助。

---

答案：

感谢此OP下面的评论者（感谢0stone0和Nick Parsons的帮助，让我理解我需要做出的改变）：

JSON 文件需要一个“Limit”对象并在产品列表旁边添加值：

{
  "products": [
    {
    ...
    }
  ],
  "limit": 30

然后创建第二个 useState 来存储并允许更新限制值，然后将该 useState 添加到

.slice()

以返回由 JSON 限制值设置的初始产品数量：

const [productsLimit, setProductsLimit] = useState(productData.limit)

productData.products.slice(0, productsLimit).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>
            {/* <button onClick={() => deleteItem(product.id)}>Delete</button> */}
          </div>
          
        </div>
      ))

然后只需制作按钮以使用新值更新新的

useState

即可增加要显示的产品数量：

const viewMoreButton = document.querySelector('.viewMore button');
viewMoreButton.addEventListener('click', () => {
  setProductsLimit(productsLimit + productData.limit);
});

---

根据要求提供初始重新打开的更多代码：

import React, { useState, useEffect } from 'react'
import productData from './assets/products.json'

const App = () => {

  const [products, setProducts] = useState([])
  
  
  useEffect(() => {
    setProducts(productData.products);
  })
  
  let numberOfProductsToShow = 30;
  
  const propductsMap = (loadFrom, loadTo) => {
    return (
      products.slice(loadFrom, loadTo).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 viewMoreButton = document.querySelector('.viewMore button');
    const productList = document.querySelector('.productsList .products');
    viewMoreButton.addEventListener('click', () => {
      loadMoreProducts();
    });

    const loadMoreProducts = () => {
      numberOfProductsToShow = numberOfProductsToShow + 30;
      productList.innerHTML = propductsMap(0, numberOfProductsToShow);
    };
    
    return (
    <div className='shopperApp'>
      <Header />

      <div className='productsList'>
        <div className='products'>
          {propductsMap(0, numberOfProductsToShow)}
        </div>        
        <div className='viewMore'><button>View More</button></div>
      </div>

      

    </div>
  )
}

export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Answer 1

JSON 文件需要一个

Limit

对象并在产品列表旁边添加值：

{
  "products": [
    {
    ...
    }
  ],
  "limit": 30

然后创建第二个

useState

来存储并允许更新限制值，然后将

useState

添加到

.slice()

以返回由 JSON 限制值设置的初始产品数量：

const [productsLimit, setProductsLimit] = useState(productData.limit)

productData.products.slice(0, productsLimit).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>
            {/* <button onClick={() => deleteItem(product.id)}>Delete</button> */}
          </div>
          
        </div>
      ))

然后只需创建按钮即可用新值更新新的

useState

，以增加要显示的产品数量：

const viewMoreButton = document.querySelector('.viewMore button');
viewMoreButton.addEventListener('click', () => {
  setProductsLimit(productsLimit + productData.limit);
});