javascript - 如何访问嵌套对象然后在 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>)
推荐阅读
- java - 导出 Java 项目时,我的图形不会显示
- pandas - Pandas - 将具有多个值的行拆分为新行
- vb.net - VB.NET - 如何以编程方式将身份验证传递给服务器 - 如何访问需要身份验证的服务器上的文件
- xaml - NavBar 未出现在 Xamarin 的 DetailPage 上
- excel - 使用 VBA(债券)计算摊销成本
- php - 如何使用转义字符修复 Preg 替换问题
- python - 当我尝试播放 2116kbps 的 wav 文件时,OpenAL 只会发出噪音,这是怎么回事?
- elasticsearch - Elasticsearch 函数得分排序
- excel - 将日期从 d/M/yy hh:mm tt 转换为 dd/MM/yyyy HH:mm
- c++ - 如何确保“<<”运算符适用于模板化 ADT 定义中的任何泛型类型?