Подсказка о том, как выполнить цикл при рендеринге в Reactjs - PullRequest
Новая
       0

Подсказка о том, как выполнить цикл при рендеринге в Reactjs

0 голосов
/ 13 мая 2018

Я новичок в Reactjs и попал в этот код, я могу отобразить данные, но вызывающий компонент ProductItem для каждого продукта

Может кто-нибудь намекнуть мне правильный способ зацикливания без вызова ProductItem для каждого продукта

App.js 

render() {     

 return (
         <div >   
           <nav className="navbar navbar-light bg-light">
                  <span className="navbar-brand mb-0 h1">Product Manager</span>
            </nav>

                  { 
                    this.state.products.map(product => {
                      return (
                        <ProductItem
                           key={product.name}
                            {...product}
                        />
                      );
                    })   
                  } 
             </div>
                );
              }

ProductItem.js 

class ProductItem extends Component {


 render(){
  const {name, price, quantity} = this.props;
         return(
             <div className="container">           
                    <table className="table table-striped">
                     <thead>
                       <tr>
                         <th>Product Name</th>
                         <th>Product Price</th> 
                         <th>Quantity </th>  
                       </tr>
                     </thead>
                     <tbody>
                     <tr>
                       <td>{name}</td>
                       <td>{price}</td>
                       <td>{quantity}</td>
                       <td><button className="btn btn-danger">Delete</button></td>
                   </tr>
                   </tbody>
          </table>
        </div>
                );
            }
        }

1 Ответ

0 голосов
/ 13 мая 2018

Не помещайте <ProductItem /> в цикл.вы передаете this.state.product как реквизит <ProductItem /> Как: 

<ProductItem products={this.state.product} />

Затем ваш <ProductItem /> компонент зацикливается как 

this.props.products.map((product, index) => {
   <tr key={product.index}>
       <td>{product.name}</td>
       <td>{product.price}</td>
       <td>{product.quantity}</td>
       <td><button className="btn btn-danger">Delete</button></td>
   </tr>
})

внутри тега tbody таблицы

...