时间戳

首页 > 解决方案 > for循环反应一次显示20个产品

javascript - for循环反应一次显示20个产品

问题描述

我正在尝试创建一个反应应用程序，该应用程序一次显示 20 个产品，一次添加，另外 20 个在另一个添加之前显示，所以我想做一个显示 20 个产品的 for 循环。我创建了一个 for 循环，但出现错误。

这是我的组件的渲染

  render() {

  const Prods = () => {
    return (
    <div>
       <div className="row">
            <div className="col-12">
                <button onClick={this.sortPrice}>sort by price lower to higher</button>
                <button onClick={this.sortSize}>sort by size small to big</button>
                <button onClick={this.sortId}>sort by Id</button>  
            </div>  
        </div>
        for (let i = 0; i < 20; i++) {
            {products.map(product =>


            <div key={product.id} className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize: `${product.size}px`}} > {product.face}</p>
                </div>

            </div> 

            )}
        }
            <p>"~END OF CATALOG~"</p>
      </div>
    );
};

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

这是我的错误：

解析错误：意外的令牌

  102 |                         </div>
  103 |                 </div>
> 104 |                 for (let i = 0; i < 20; i++) {
      |                                     ^
  105 |                         {products.map(product =>

我尝试使用数组在外部创建一个函数以在渲染外部执行循环，但出现了不同的错误。这是我对具有 for 循环的函数的组件

createDisplay = () => {



    let display = []


    for (let i = 0; i < 20; i++) {
      dislay.push({products.map(product =>


            <div key={product.id} className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize: `${product.size}px`}} > {product.face}</p>
                </div>
            </div> 

            )})
    }
    return display
  }



  render() {


  const Prods = () => {
    return (
    <div>
       <div className="row">
            <div className="col-12">
                <button onClick={this.sortPrice}>sort by price lower to higher</button>
                <button onClick={this.sortSize}>sort by size small to big</button>
                <button onClick={this.sortId}>sort by Id</button>  
            </div>  
        </div>
        <div>
        {this.createDisplay()}
        </div>
            <p>"~END OF CATALOG~"</p>
      </div>
    );
};

    const { products, isLoading, error } = this.state;
    if (error) {
      return <p>{error.message}</p>;
    }
    if (isLoading) {
      return  <Loading />;
    }
    return (
      <Prods />

    );
  }
}

有了这个我得到下一个错误解析错误：

Unexpected token, expected ","

  92 |
  93 |     for (let i = 0; i < 20; i++) {
> 94 |       dislay.push({products.map(product =>
     |                            ^
  95 |
  96 |
  97 |                  <div key={product.id} className="row">

我是新手，所以我有点迷茫。

标签： javascriptreactjs

解决方案

您在 JSX 中的代码需要包含在{}

   { for (let i = 0; i < 20; i++) {
            {products.map(product =>


            <div key={product.id} className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize: `${product.size}px`}} > {product.face}</p>
                </div>

            </div> 

            )}
        } 
      }

对于第二个

你试图用 20 个 JSX 元素推送一个对象：

createDisplay = () => {



    let display = [];


    for (let i = 0; i < 20; i++) {
        //map returns an array 
        let productElements = products.map(product =>


            <div key={product.id} className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize: `${product.size}px`}} > {product.face}</p>
                </div>
            </div> 
            );
         display.push(...productElements); //use spread elements 

    }
    return display
  }

在 for 循环中映射也不是您想要做的。删除 for 循环，只使用 map。它返回映射操作结果的数组。由于 for 循环，您所做的是使渲染需要很长时间，因为它会创建并填充 20 个项目 20 次。

{
   products.map(product =>


            <div key={product.id} className="row">
                <div className="col-3">
                  <p> Price: ${(product.price/100).toFixed(2)}</p>
                </div>

                <div className="col-3">
                  <p style={{fontSize: `${product.size}px`}} > {product.face}</p>
                </div>

            </div> 

            )
}

你可以用上面的方法做所有事情，不需要 for 循环。

推荐阅读