React：映射到映射数组内的数组

Question

我有一系列产品，有些产品可能有一系列产品颜色，但不能保证。我正在尝试映射每种产品的每种颜色（如果可用）以赋予它自己的 div。除了 product.product_colors.map() 部分，我写的这段代码有效。任何贡献或资源链接都会有所帮助。谢谢

从 api 中获取的数据如下所示：

{
    "status": 200,
    "count": 2,
    "data": [
        {
        "product_id": 1,
        "product_name": "PRODUCT NUMBER 1",
        "product_price": "14.95",
            "product_colors": [
            {
            "color_id": 1,
            "color_name": "Velvet",
            "color_description": "A reddish-purple color"
            },
            {
                "color_id": 2,
                "color_name": "Navy",
                "color_description": "A darkish blue color somewhat similar to the deep ocean color."
            }
            ]
        },
        {
        "product_id": 2,
        "product_name": "PRODUCT NUMBER 2",
        "product_price": "8.99"
        }
    ]
}

我当前的代码如下所示：

    return(
        <div>
            {data.map((product, index) => (
                <div key={index}>
                    <h2>{product.product_id} ---- {product.product_name}</h2>
                    <h2>{product.product_price}</h2>

                    {product.product_colors
                    ?<div><p>No colors available</p></div>
                    : product.product_colors.map((color) => (
                        <div>
                            <p>{color.color_name}</p>
                            <p>{color.color_description}</p>
                        </div>
                    ))
                    }

                    <br />
                </div>
            ))}
        </div>
    );

Answer 1

您已切换条件。您希望在 product.product_colors 为真时映射数组，这是第一个条件。

换句话说，你想要

product.product_colors ? product.product_colors.map((color) => (
                        <div>
                            <p>{color.color_name}</p>
                            <p>{color.color_description}</p>
                        </div> : <div><p>No colors available</p></div>

Answer 2

错误是由于第二项没有 product_colors 属性。您需要使用 optional chanining operator (?.) 来消除您遇到的错误。

product.product_colors?.map((color) => (
  <div>
    <p>{color.color_name}</p>
    <p>{color.color_description}</p>
  </div>
))

Answer 3

您需要确保 product.product_colors 存在。

最短的方法是使用 optional chaining ?. 语法：

product.product_colors?.map((color, index) =>

小例子：

const data = {"status": 200, "count": 2, "data": [{"product_id": 1, "product_name": "PRODUCT NUMBER 1", "product_price": "14.95", "product_colors": [{"color_id": 1, "color_name": "Velvet", "color_description": "A reddish-purple color"}, {"color_id": 2, "color_name": "Navy", "color_description": "A darkish blue color somewhat similar to the deep ocean color."} ] }, {"product_id": 2, "product_name": "PRODUCT NUMBER 2", "product_price": "8.99"} ] };

const res = data.data.map((product, index) => {
    product.product_colors?.map((color, index) => {
        console.log(color);
    });
});

React：映射到映射数组内的数组

React : Mapping over an array inside of a mapped array

jsx

reactjs