javascript - React 尝试在添加元素之前执行 while 循环以显示 n 个元素

Question

我正在创建一个 react 应用程序，在添加后显示 20 个产品，使其余产品保持空闲状态，并在到达最后一批显示产品的底部时显示另外 20 个产品。我在一个分割数组的函数中创建了一个 while 循环(这有效)。当我引入渲染中的代码(timeAgo 和 Prods const)并尝试添加 while 循环来显示分割数组时，我收到错误:

在我在渲染中显示带有 const timeAgo 和 Prods 的所有产品但其中没有 while 循环之前，它只是映射所有产品的思想并显示。

这是我的 react 代码

import React, { Component } from 'react';
import { Loading } from './LoadingComponent';
const API = 'http://localhost:3000/products';


class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      percentage: '',
      isLoading: false,
      error: null,
    };
  }

componentDidMount() {
    this.setState({ isLoading: true });
    fetch(API)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then(data => this.setState({ products: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }

sortPrice = () => {
    const { products } = this.state;
    products.sort((a, b) => a.price - b.price)    
    this.setState({ products })
  }

sortSize = () => {
    const { products } = this.state;
    products.sort((a, b) => a.size - b.size)    
    this.setState({ products })
  }


sortId = () => {
    var reA = /[^a-zA-Z]/g;
    var reN = /[^0-9]/g;
    const { products } = this.state;  
    products.sort(function sortAlphaNum(a, b) {
    var aA = a.id.replace(reA, "");
    var bA = b.id.replace(reA, "");
    if (aA === bA) {
        var aN = parseInt(a.id.replace(reN, ""), 10);
        var bN = parseInt(b.id.replace(reN, ""), 10);
        return aN === bN ? 0 : aN > bN ? 1 : -1;
    } else {
        return aA > bA ? 1 : -1;
      }
    })
    this.setState({ products })
  }



displayContent = () => {

    const { products } = this.state;  
    var arrays = [], size = 20;

  var arrayslenght = arrays.length;
  var i = 0;

    while (products.length > 0){
        arrays.push(products.splice(0, size));
    }
    console.log(arrays);






  const timeAgo = (prevDate) => {
        const diff = Number(new Date()) - prevDate;
        const minute = 60 * 1000;
        const hour = minute * 60;
        const day = hour * 24;
        const month = day * 30;
        const year = day * 365;
        switch (true) {
            case diff < minute:
                const seconds = Math.round(diff / 1000);
                 return `${seconds} ${seconds > 1 ? 'seconds' : 'second'} ago`
            case diff < hour:
                return Math.round(diff / minute) + ' minutes ago';
            case diff < day:
                return Math.round(diff / hour) + ' hours ago';
            case diff < month:
                return Math.round(diff / day) + ' days ago';
            case diff < year:
                return Math.round(diff / month) + ' months ago';
            case diff > year:
                return Math.round(diff / year) + ' years ago';
            default:
                return "";
        }
    };

  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>
         while (arrayslenght > i) {
            {arrays[i].map(product =>

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

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

                <div className="col-4">
                  <p>Published: {timeAgo(new Date(product.date).getTime())}</p>
                </div>

            </div> 
         )}

         i= i+1;

         <div className="row">
            <div className="col-12">
                <p>ADD</p>
            </div>
        </div>

  }
         <div className="row">
            <div className="col-12">                
                <p>"~END OF CATALOG~"</p>
            </div>
        </div>
      </div>
    );
};



  }




  render() {


    this.displayContent();


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

    );
  }
}

export default Products;

这是我的错误

解析错误:意外的标记，应为“，”

117 | 118 | 118 while (数组长度 > i) {

119 | {arrays[i].map(product => | ^ 120 | 121 | 122 |

我真的很新，所以我不确定这是做我想做的事情的写作方式，我有点迷失了。

这是来自 localhost:3000/products 的一些内容

 {
    "id": "33480-rdt892kej5",
    "size": 19,
    "price": 762,
    "face": "( .-. )",
    "date": "Thu Nov 07 2019 17:15:33 GMT-0500 (Colombia Standard Time)"
  },
  {
    "id": "71197-jvsw3t5vmun",
    "size": 35,
    "price": 318,
    "face": "( .o.)",
    "date": "Sun Nov 10 2019 15:52:51 GMT-0500 (Colombia Standard Time)"
  },
  {
    "id": "52383-rv7ozq0t5md",
    "size": 32,
    "price": 234,
    "face": "( `·´ )",
    "date": "Wed Nov 06 2019 01:43:26 GMT-0500 (Colombia Standard Time)"
  },
  {
    "id": "5171-cy5v55aenm",
    "size": 32,
    "price": 25,
    "face": "( ° ͜ ʖ °)",
    "date": "Tue Nov 05 2019 09:44:45 GMT-0500 (Colombia Standard Time)"
  },
  {
    "id": "24915-kunbaov27g",
    "size": 14,
    "price": 924,
    "face": "( ͡° ͜ʖ ͡°)",
    "date": "Mon Nov 11 2019 03:54:58 GMT-0500 (Colombia Standard Time)"
  },
  {

Answer 1

问题是渲染内嵌套的 while 和 map 。您需要更新这些以返回组件:像这样嵌套时return ()。

我没有您项目中的示例数据，但您应该能够遵循下面的类似示例:

  const categories = [
    {
      name: "books",
      products: [{ name: "The Hobbit" }, { name: "Dune" }]
    },
    {
      name: "films",
      products: [{ name: "Star Wars" }, { name: "Ghostbusters" }]
    }
  ];

  ...

  return (
    <>
      <h1>Demo For Nested Loops</h1>
      {categories.map(category => {
        return (
          <>
            <h2 key={category.name}>{category.name}</h2>
            {category.products.map(product => {
              return <h4 key={product.key}>{product.name}</h4>;
            })}
          </>
        );
      })}
    </>
  );

举个例子:

Codesandbox Demo