[英]How can I access nested objects that are not similiar and iterate through them?
[英]How can I access to nested objects then render them in React Native?
如何获取产品的所有variations
并将它们全部呈现在组件中:
JSON:
[
{
...
},
{
"id": 2,
"title": "chicken burger 2",
"sort": 2,
"img": "http://127.0.0.1:8000/media/categories/unnamed_tyEgUqN.jpg",
"price": 2.0,
"category": {
"id": 1,
"title": "sandwiches",
"img": "http://127.0.0.1:8000/media/categories/original_D3hTuRE.jpg"
},
"description": "chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chick",
"variations": [
{
"id": 1,
"variation_category": {
"id": 1,
"title": "add ons",
"is_optional": true,
"is_selectable": false
},
"item": "extra cheese",
"price": 0.1
},
{
"id": 2,
"variation_category": {
"id": 1,
"title": "add ons",
"is_optional": true,
"is_selectable": false
},
"item": "double chicken",
"price": 0.6
}
]
}
]
我映射到varioations[0]
并且我只访问了第一个对象:
function ProductDetailScreen(props) {
//api
const [productsData, setProductsData] = useState([]);
useEffect(() => {
loadProductsData();
}, []);
const loadProductsData = async () => {
const response = await productsApi.getProducts();
setProductsData(response.data);
};
const productId = props.route.params.productId;
const thisProduct = productsData.filter((prod) => prod.id === productId);
const thisVariation = thisProduct.map(v => v.variations[0])
const showVar = thisVariation.map(v => v.item)
return (
...
<MyText>{showVar}</MyText>
...
)
我的问题是如何获取所有变体并在 MyText 中呈现它们,因此输出将是:
extra cheese 0.100
double chicken 0.600
先感谢您,
您需要执行以下操作:
const variations = thisProduct.map(product => product.variations.map(variation => variation.item))
return variations.map((variation, index) => <MyText key={index}>{variation}</MyText>)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.