时间戳

首页 > 解决方案 > 我怎样才能从这个 JS 对象中取出这个属性？

javascript - 我怎样才能从这个 JS 对象中取出这个属性？

问题描述

我正在使用 graphQL 和 gatsby 为我正在构建的博客网站渲染图像，但是当我绘制对象时，我无法取出每个图像。我在这里有对象数组，但似乎无法取出fluid.src。

这是我到目前为止所做的，但似乎无法更进一步。

console.log(data.allContentfulLongPost.edges.map((e) => e.node.image))

我得到：

[
    {
        "fluid": {
            "src": "//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=500&h=500&q=50",
            "srcSet": "//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=125&h=125&q=50 125w,\n//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=250&h=250&q=50 250w,\n//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=500&h=500&q=50 500w,\n//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=750&h=750&q=50 750w,\n//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=1000&h=1000&q=50 1000w,\n//images.ctfassets.net/8olws3vbib1c/5l1P6kfntYV4qnU8i26dcd/ac2321ca81df3b1db52d6a2be54f35dd/plant_protein.jpg?w=1500&h=1500&q=50 1500w"
        },
        "title": "Plant Protein Powder"
    },
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null
]

当我尝试

console.log(data.allContentfulLongPost.edges.map((e) => e.node.image.fluid.src))

我得到“流体未定义”

我知道其中只有一个有图像

标签： javascriptreactjs

解决方案

所以数组中的第一个项目有一个图像，但所有其他的都是空的......

您可以先过滤它们：

data.allContentfulLongPost.edges
  .filter(e => e.node.image)
  .map((e) => e.node.image.fluid.src)

这个：

.filter(e => e.node.image)

null将在您的演示输出中删除所有没有图像（图像在哪里）的数组值。

推荐阅读