Выборка параметров товара
как сделать поиск skuId исходя из выборного параметра на reactJs:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
state = {
"skuBase": {
"skus": [
{
"skuId": "4164813624954",
"propPath": "20518:3242700;1627207:7184208885"
},
{
"skuId": "4164813624955",
"propPath": "20518:3242701;1627207:7184208885"
},
{
"skuId": "4164813624956",
"propPath": "20518:3241147;1627207:7184208885"
},
{
"skuId": "4164813624957",
"propPath": "20518:33263;1627207:7184208885"
},
{
"skuId": "4164813624958",
"propPath": "20518:33264;1627207:7184208885"
},
{
"skuId": "4164813624959",
"propPath": "20518:33265;1627207:7184208885"
},
{
"skuId": "4164813624960",
"propPath": "20518:669;1627207:7184208885"
},
{
"skuId": "4164813624961",
"propPath": "20518:3242700;1627207:7184208886"
},
{
"skuId": "4164813624962",
"propPath": "20518:3242701;1627207:7184208886"
},
{
"skuId": "4164813624963",
"propPath": "20518:3241147;1627207:7184208886"
},
{
"skuId": "4164813624964",
"propPath": "20518:33263;1627207:7184208886"
},
{
"skuId": "4164813624965",
"propPath": "20518:33264;1627207:7184208886"
},
{
"skuId": "4164813624966",
"propPath": "20518:33265;1627207:7184208886"
},
{
"skuId": "4164813624967",
"propPath": "20518:669;1627207:7184208886"
},
{
"skuId": "4222725973587",
"propPath": "20518:3242700;1627207:7184208887"
},
{
"skuId": "4222725973589",
"propPath": "20518:3242701;1627207:7184208887"
},
{
"skuId": "4222725973585",
"propPath": "20518:3241147;1627207:7184208887"
},
{
"skuId": "4222725973591",
"propPath": "20518:33263;1627207:7184208887"
},
{
"skuId": "4222725973593",
"propPath": "20518:33264;1627207:7184208887"
},
{
"skuId": "4222725973595",
"propPath": "20518:33265;1627207:7184208887"
},
{
"skuId": "4222725973597",
"propPath": "20518:669;1627207:7184208887"
},
{
"skuId": "4164813624968",
"propPath": "20518:3242700;1627207:3255486308"
},
{
"skuId": "4164813624969",
"propPath": "20518:3242701;1627207:3255486308"
},
{
"skuId": "4164813624970",
"propPath": "20518:3241147;1627207:3255486308"
},
{
"skuId": "4164813624971",
"propPath": "20518:33263;1627207:3255486308"
},
{
"skuId": "4164813624972",
"propPath": "20518:33264;1627207:3255486308"
},
{
"skuId": "4164813624973",
"propPath": "20518:33265;1627207:3255486308"
},
{
"skuId": "4164813624974",
"propPath": "20518:669;1627207:3255486308"
},
{
"skuId": "4164813624975",
"propPath": "20518:3242700;1627207:3255486309"
},
{
"skuId": "4164813624976",
"propPath": "20518:3242701;1627207:3255486309"
},
{
"skuId": "4164813624977",
"propPath": "20518:3241147;1627207:3255486309"
},
{
"skuId": "4164813624978",
"propPath": "20518:33263;1627207:3255486309"
},
{
"skuId": "4164813624979",
"propPath": "20518:33264;1627207:3255486309"
},
{
"skuId": "4164813624980",
"propPath": "20518:33265;1627207:3255486309"
},
{
"skuId": "4164813624981",
"propPath": "20518:669;1627207:3255486309"
},
{
"skuId": "4222725973586",
"propPath": "20518:3242700;1627207:1135022227"
},
{
"skuId": "4222725973588",
"propPath": "20518:3242701;1627207:1135022227"
},
{
"skuId": "4222725973584",
"propPath": "20518:3241147;1627207:1135022227"
},
{
"skuId": "4222725973590",
"propPath": "20518:33263;1627207:1135022227"
},
{
"skuId": "4222725973592",
"propPath": "20518:33264;1627207:1135022227"
},
{
"skuId": "4222725973594",
"propPath": "20518:33265;1627207:1135022227"
},
{
"skuId": "4222725973596",
"propPath": "20518:669;1627207:1135022227"
},
{
"skuId": "4436941647350",
"propPath": "20518:3242700;1627207:5963101515"
},
{
"skuId": "4436941647362",
"propPath": "20518:3242701;1627207:5963101515"
},
{
"skuId": "4436941647338",
"propPath": "20518:3241147;1627207:5963101515"
},
{
"skuId": "4436941647374",
"propPath": "20518:33263;1627207:5963101515"
},
{
"skuId": "4436941647386",
"propPath": "20518:33264;1627207:5963101515"
},
{
"skuId": "4436941647398",
"propPath": "20518:33265;1627207:5963101515"
},
{
"skuId": "4436941647410",
"propPath": "20518:669;1627207:5963101515"
},
{
"skuId": "4436941647346",
"propPath": "20518:3242700;1627207:5840039906"
},
{
"skuId": "4436941647358",
"propPath": "20518:3242701;1627207:5840039906"
},
{
"skuId": "4436941647334",
"propPath": "20518:3241147;1627207:5840039906"
},
{
"skuId": "4436941647370",
"propPath": "20518:33263;1627207:5840039906"
},
{
"skuId": "4436941647382",
"propPath": "20518:33264;1627207:5840039906"
},
{
"skuId": "4436941647394",
"propPath": "20518:33265;1627207:5840039906"
},
{
"skuId": "4436941647406",
"propPath": "20518:669;1627207:5840039906"
},
{
"skuId": "4436941647351",
"propPath": "20518:3242700;1627207:5963101516"
},
{
"skuId": "4436941647363",
"propPath": "20518:3242701;1627207:5963101516"
},
{
"skuId": "4436941647339",
"propPath": "20518:3241147;1627207:5963101516"
},
{
"skuId": "4436941647375",
"propPath": "20518:33263;1627207:5963101516"
},
{
"skuId": "4436941647387",
"propPath": "20518:33264;1627207:5963101516"
},
{
"skuId": "4436941647399",
"propPath": "20518:33265;1627207:5963101516"
},
{
"skuId": "4436941647411",
"propPath": "20518:669;1627207:5963101516"
},
{
"skuId": "4436941647347",
"propPath": "20518:3242700;1627207:5937273695"
},
{
"skuId": "4436941647359",
"propPath": "20518:3242701;1627207:5937273695"
},
{
"skuId": "4436941647335",
"propPath": "20518:3241147;1627207:5937273695"
},
{
"skuId": "4436941647371",
"propPath": "20518:33263;1627207:5937273695"
},
{
"skuId": "4436941647383",
"propPath": "20518:33264;1627207:5937273695"
},
{
"skuId": "4436941647395",
"propPath": "20518:33265;1627207:5937273695"
},
{
"skuId": "4436941647407",
"propPath": "20518:669;1627207:5937273695"
},
{
"skuId": "4436941647356",
"propPath": "20518:3242700;1627207:618399174"
},
{
"skuId": "4436941647368",
"propPath": "20518:3242701;1627207:618399174"
},
{
"skuId": "4436941647344",
"propPath": "20518:3241147;1627207:618399174"
},
{
"skuId": "4436941647380",
"propPath": "20518:33263;1627207:618399174"
},
{
"skuId": "4436941647392",
"propPath": "20518:33264;1627207:618399174"
},
{
"skuId": "4436941647404",
"propPath": "20518:33265;1627207:618399174"
},
{
"skuId": "4436941647416",
"propPath": "20518:669;1627207:618399174"
},
{
"skuId": "4436941647357",
"propPath": "20518:3242700;1627207:618399175"
},
{
"skuId": "4436941647369",
"propPath": "20518:3242701;1627207:618399175"
},
{
"skuId": "4436941647345",
"propPath": "20518:3241147;1627207:618399175"
},
{
"skuId": "4436941647381",
"propPath": "20518:33263;1627207:618399175"
},
{
"skuId": "4436941647393",
"propPath": "20518:33264;1627207:618399175"
},
{
"skuId": "4436941647405",
"propPath": "20518:33265;1627207:618399175"
},
{
"skuId": "4436941647417",
"propPath": "20518:669;1627207:618399175"
},
{
"skuId": "4436941647352",
"propPath": "20518:3242700;1627207:5963101517"
},
{
"skuId": "4436941647364",
"propPath": "20518:3242701;1627207:5963101517"
},
{
"skuId": "4436941647340",
"propPath": "20518:3241147;1627207:5963101517"
},
{
"skuId": "4436941647376",
"propPath": "20518:33263;1627207:5963101517"
},
{
"skuId": "4436941647388",
"propPath": "20518:33264;1627207:5963101517"
},
{
"skuId": "4436941647400",
"propPath": "20518:33265;1627207:5963101517"
},
{
"skuId": "4436941647412",
"propPath": "20518:669;1627207:5963101517"
},
{
"skuId": "4436941647353",
"propPath": "20518:3242700;1627207:5963101518"
},
{
"skuId": "4436941647365",
"propPath": "20518:3242701;1627207:5963101518"
},
{
"skuId": "4436941647341",
"propPath": "20518:3241147;1627207:5963101518"
},
{
"skuId": "4436941647377",
"propPath": "20518:33263;1627207:5963101518"
},
{
"skuId": "4436941647389",
"propPath": "20518:33264;1627207:5963101518"
},
{
"skuId": "4436941647401",
"propPath": "20518:33265;1627207:5963101518"
},
{
"skuId": "4436941647413",
"propPath": "20518:669;1627207:5963101518"
},
{
"skuId": "4436941647354",
"propPath": "20518:3242700;1627207:5963101519"
},
{
"skuId": "4436941647366",
"propPath": "20518:3242701;1627207:5963101519"
},
{
"skuId": "4436941647342",
"propPath": "20518:3241147;1627207:5963101519"
},
{
"skuId": "4436941647378",
"propPath": "20518:33263;1627207:5963101519"
},
{
"skuId": "4436941647390",
"propPath": "20518:33264;1627207:5963101519"
},
{
"skuId": "4436941647402",
"propPath": "20518:33265;1627207:5963101519"
},
{
"skuId": "4436941647414",
"propPath": "20518:669;1627207:5963101519"
},
{
"skuId": "4436941647348",
"propPath": "20518:3242700;1627207:5937273696"
},
{
"skuId": "4436941647360",
"propPath": "20518:3242701;1627207:5937273696"
},
{
"skuId": "4436941647336",
"propPath": "20518:3241147;1627207:5937273696"
},
{
"skuId": "4436941647372",
"propPath": "20518:33263;1627207:5937273696"
},
{
"skuId": "4436941647384",
"propPath": "20518:33264;1627207:5937273696"
},
{
"skuId": "4436941647396",
"propPath": "20518:33265;1627207:5937273696"
},
{
"skuId": "4436941647408",
"propPath": "20518:669;1627207:5937273696"
},
{
"skuId": "4436941647349",
"propPath": "20518:3242700;1627207:5937273697"
},
{
"skuId": "4436941647361",
"propPath": "20518:3242701;1627207:5937273697"
},
{
"skuId": "4436941647337",
"propPath": "20518:3241147;1627207:5937273697"
},
{
"skuId": "4436941647373",
"propPath": "20518:33263;1627207:5937273697"
},
{
"skuId": "4436941647385",
"propPath": "20518:33264;1627207:5937273697"
},
{
"skuId": "4436941647397",
"propPath": "20518:33265;1627207:5937273697"
},
{
"skuId": "4436941647409",
"propPath": "20518:669;1627207:5937273697"
},
{
"skuId": "4436941647355",
"propPath": "20518:3242700;1627207:5963101520"
},
{
"skuId": "4436941647367",
"propPath": "20518:3242701;1627207:5963101520"
},
{
"skuId": "4436941647343",
"propPath": "20518:3241147;1627207:5963101520"
},
{
"skuId": "4436941647379",
"propPath": "20518:33263;1627207:5963101520"
},
{
"skuId": "4436941647391",
"propPath": "20518:33264;1627207:5963101520"
},
{
"skuId": "4436941647403",
"propPath": "20518:33265;1627207:5963101520"
},
{
"skuId": "4436941647415",
"propPath": "20518:669;1627207:5963101520"
}
],
"props": [
{
"pid": "20518",
"name": "尺寸",
"values": [
{
"vid": "3242700",
"name": "25",
"translate": "25"
},
{
"vid": "3242701",
"name": "26",
"translate": "26"
},
{
"vid": "3241147",
"name": "27",
"translate": "27"
},
{
"vid": "33263",
"name": "28",
"translate": "28"
},
{
"vid": "33264",
"name": "29",
"translate": "29"
},
{
"vid": "33265",
"name": "30",
"translate": "30"
},
{
"vid": "669",
"name": "31",
"translate": "31"
}
],
"translate": "размер"
},
{
"pid": "1627207",
"name": "颜色分类",
"values": [
{
"vid": "7184208885",
"name": "复古蓝（八分）春款",
"image": "//img.alicdn.com/imgextra/i4/3039690011/O1CN01IYzpiL1Bx4vMJWLV4_!!3039690011.jpg",
"translate": "Винтажная голубая (восемь центов) весна"
},
{
"vid": "7184208886",
"name": "复古蓝（九分）春款",
"image": "//img.alicdn.com/imgextra/i4/3039690011/O1CN019BwAVJ1Bx4vK2AkKl_!!3039690011.jpg",
"translate": "Урожай голубой (девять баллов) весна"
},
{
"vid": "7184208887",
"name": "复古蓝（长裤）春款",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01hdDAcC1Bx4vHkpOyj_!!3039690011.jpg",
"translate": "Урожай голубой (брюки) весна"
},
{
"vid": "3255486308",
"name": "黑色（八分）春款",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01DRrNXE1Bx4vIWsYwN_!!3039690011.jpg",
"translate": "Черная (восемь центов) весна"
},
{
"vid": "3255486309",
"name": "黑色（九分）春款",
"image": "//img.alicdn.com/imgextra/i2/3039690011/O1CN01QgOZZ11Bx4vHkpKs3_!!3039690011.jpg",
"translate": "Черная (девять баллов) весна"
},
{
"vid": "1135022227",
"name": "黑色（长裤）春款",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01o8JjsV1Bx4vK2Cgyw_!!3039690011.jpg",
"translate": "Черные (брюки) весенние"
},
{
"vid": "5963101515",
"name": "复古蓝（八分）薄绒",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01ojHEJl1Bx4vbaCd9B_!!3039690011.jpg",
"translate": "Ретро синий (восемь баллов)"
},
{
"vid": "5840039906",
"name": "复古蓝（九分）薄绒",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01KFjMrk1Bx4vWngW2k_!!3039690011.jpg",
"translate": "Винтажный синий (девять очков) бархат"
},
{
"vid": "5963101516",
"name": "复古蓝（长裤）薄绒",
"image": "//img.alicdn.com/imgextra/i4/3039690011/O1CN01QWMkZJ1Bx4vZvPjs7_!!3039690011.jpg",
"translate": "Винтаж синего (брюки) тонкого флиса"
},
{
"vid": "5937273695",
"name": "黑色（八分）薄绒",
"image": "//img.alicdn.com/imgextra/i4/3039690011/O1CN01FgI3fp1Bx4vWneN0A_!!3039690011.jpg",
"translate": "Черный (восемь баллов) бархат"
},
{
"vid": "618399174",
"name": "黑色（九分）薄绒",
"image": "//img.alicdn.com/imgextra/i1/3039690011/O1CN01kDDwod1Bx4vXmOH4d_!!3039690011.jpg",
"translate": "Черный (девять очков) бархат"
},
{
"vid": "618399175",
"name": "黑色（长裤）薄绒",
"image": "//img.alicdn.com/imgextra/i1/3039690011/O1CN01VZXlb01Bx4vXmOsU8_!!3039690011.jpg",
"translate": "Черный (брюки)"
},
{
"vid": "5963101517",
"name": "复古蓝（八分）厚绒",
"image": "//img.alicdn.com/imgextra/i1/3039690011/O1CN01vGhUCL1Bx4vaCq0lx_!!3039690011.jpg",
"translate": "Урожай голубой (восемь очков) толстый ворс"
},
{
"vid": "5963101518",
"name": "复古蓝（九分）厚绒",
"image": "//img.alicdn.com/imgextra/i3/3039690011/O1CN01v7m8U31Bx4vaCp0Pz_!!3039690011.jpg",
"translate": "Винтажный синий (девять очков) толстый бархат"
},
{
"vid": "5963101519",
"name": "复古蓝（长裤）厚绒",
"image": "//img.alicdn.com/imgextra/i4/3039690011/O1CN01DoUlwC1Bx4vXmOsVe_!!3039690011.jpg",
"translate": "Ретро синий (брюки) толстый бархат"
},
{
"vid": "5937273696",
"name": "黑色（八分）厚绒",
"image": "//img.alicdn.com/imgextra/i2/3039690011/O1CN01pW2oQg1Bx4vWnhFo3_!!3039690011.jpg",
"translate": "Чёрный (восемь баллов) толстый ворс"
},
{
"vid": "5937273697",
"name": "黑色（九分）厚绒",
"image": "//img.alicdn.com/imgextra/i2/3039690011/O1CN01JBcHE41Bx4vZia0Ng_!!3039690011.jpg",
"translate": "Чёрный (девять очков) толстый ворс"
},
{
"vid": "5963101520",
"name": "黑色（长裤）厚绒",
"image": "//img.alicdn.com/imgextra/i1/3039690011/O1CN01LlnoJQ1Bx4vZiak5H_!!3039690011.jpg",
"translate": "Чёрный (брюки) толстый ворс"
}
],
"translate": "Цвет"
}
]
}
}
skuProps = (pid,vid) => {
console.log(pid +':'+ vid)
}
render() {
console.log(this.state.skuBase.props)
return (
<div>
{this.state.skuBase.props.map((value, key) => {
return (
<div key={key}>
<p>{value.translate}</p>
<ul>
{value.values.map((v,k) => {
return (
<li onClick={() => this.skuProps(value.pid, v.vid)} key={k}>
{v.translate}
</li>
)
})}
</ul>
</div>
)
})}
</div>
);
}
}
render(<App />, document.getElementById('root'));
параметры могут быть разные цвет, размер, тип сети, емкость вот здесь пример кода
Ответы (1 шт):
Автор решения: Станислав Усанов
→ Ссылка
state = {
"skuBase": {
"skus": [
{
"skuId": "4164813624954",
"propPath": "20518:3242700;1627207:7184208885"
}
]
}
}
const result = state.skuBase.skus.filter(item => item.propPath == "20518:3242700;1627207:7184208885");
console.log(result);
// result: Array ["4164813624954"]