如何访问嵌套对象然后在 React Native 中呈现它们？

如何解决如何访问嵌套对象然后在 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,"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>)