以便一次显示20个产品

Question

我正在尝试创建一个react应用程序，一次显示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">

我是新手，所以我有点不知所措。

Answer 1

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循环。

Answer 2

你应该接受Kyle的回答，但我会把数组分块函数分解成一个实用程序方法，这样你就可以在应用程序的其他地方使用它。类似于：

function chunk(array, size) {
const chunked_arr = [];
let index = 0;
while (index < array.length) {
chunked_arr.push(array.slice(index, size + index));
index += size;
}
return chunked_arr;
}