React js循环遍历从刀片接收的数组

Posted 2023-02-21

【中文标题】React js循环遍历从刀片接收的数组

【英文标题】：React js loop through array received from blade

【发布时间】：2018-10-01 16:22:08

【问题描述】：

我在一个 Laravel 项目的前端使用 React js。从控制器，我将一个数组传递给我的视图：

return view('shopCart')->with('items',$it);

现在在视图中 a 可以像这样遍历数组：

@foreach($items as $item)
                <li><input type="checkbox" name=""> <span>$item->Name</span> <span></span>  <span>$item->Cost</span> </li>
@endforeach

这工作正常。但我想让视图更加动态（顺便说一下，这是购物车中的产品列表）。例如，默认情况下所有复选框都会被选中，这意味着用户正在购买所有商品。我希望如果用户取消选中一个框，总价格会发生变化。所以我制作了一个 React 组件，并通过 props 将 $items 数组传递给该组件：

<div id="listshops" datas=$items></div>

还有组件：

class Items extends Component 
    render() 


        return (
            <div className="container">
               <a href="/products">Continue shopping</a>
               //LOOP THROUGH THE ARRAY OF PRODUCTS
            </div>
        );
    


export default Items;


window.onload=function()
if (document.getElementById('listshops')) 
    var data=document.getElementById('listshops').getAttribute("datas");
    ReactDOM.render(<Items items=data/>, document.getElementById('listshops'));

如何循环遍历传递给组件的数组，以便像在刀片中的 @foreach 中一样显示产品？

【问题讨论】：

这是以下问题的重复问题：***.com/questions/46908480/…

【参考方案1】：

Array#map，不要“循环”。您正在将一个数据集（您的产品）映射到另一个相同大小的数据集（React 组件）

const  items  = this.props;

return (
  <div className="container">
    <a href="/products">Continue shopping</a>
    items.map(( Name, Cost ) => <li key=Name>
      <input type="checkbox" name="" /> <span>Name</span> <span></span>  <span>Cost</span>
    </li>)
  </div>
);

通常当您map 时，这很好地表明您正在使用一个也可以重复使用的组件。这对您来说可能是一种更清洁的方法：

const Product = ( Name, Cost ) => (
  <li>
    <input type="checkbox" name="" />
    <span>Name</span>
    <span></span>
    <span>Cost</span>
  </li>
);

然后在你的渲染中：

const  items  = this.props;

return (
  <div className="container">
    <a href="/products">Continue shopping</a>
    items.map(( Name, Cost ) => <Product ...Name, Cost/>
  </div>
);