如何访问嵌套对象然后在 React Native 中渲染它们？答案

【问题标题】：How can I access to nested objects then render them in React Native?如何访问嵌套对象然后在 React Native 中渲染它们？
【发布时间】：2021-07-23 21:44:32
【问题描述】：

如何获取产品的所有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

提前谢谢你，

【问题讨论】：

标签： javascript arrays react-native javascript-objects

【解决方案1】：

您需要执行以下操作：

const variations = thisProduct.map(product => product.variations.map(variation => variation.item))
return variations.map((variation, index) => <MyText key={index}>{variation}</MyText>)

【讨论】：

但是，如何垂直渲染它们？
我认为如何垂直渲染它们超出了这里的范围。我建议你搜索类似的问题，我相信你会找到你需要的。