React js: цикл через массив, полученный от blade-сервера
Я использую React js для интерфейса в проекте Laravel. С контроллера я передаю массив моему представлению:
return view('shopCart')->with('items',$it);
Теперь в представлении можно выполнить цикл по массиву следующим образом:
@foreach($items as $item)
<li><input type = "checkbox" name = ""> <span>{{$item->Name}}</span> <span></span> <span>{{$item->Cost}}</span> </li>
@endforeach
И это нормально работает. Но хотелось бы сделать просмотр более динамичным (кстати, это список товаров в корзине). Например, по умолчанию все флажки будут отмечены, что означает, что пользователь покупает все товары. Я хочу, чтобы, если пользователь снимет флажок, общая цена изменится. Итак, я создал компонент React и передал ему массив $ items через props:
<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 в лезвии?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
);
Это повторяющийся вопрос следующего: stackoverflow.com/questions/46908480/…