从数组 .map 输出 [object object]

【问题标题】：output [object object] from array .map从数组 .map 输出 [object object]
【发布时间】：2020-12-14 20:56:35
【问题描述】：

我在将我的图库图片网址映射到 src 字段时遇到问题。输出是 [object object]。任何关于我要去哪里的指针都会很棒！

代码-

   <div className="image-grid">
                {data.home.galleryImage.map((url, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                       <img src={url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

graphql 查询 -

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      url
    }
    }
  }
`

【问题讨论】：

stackoverflow.com/questions/4750225/…

标签： javascript reactjs graphql gatsby

【解决方案1】：

您的 url 项目是可迭代对象，而不是 url 本身。将其更改为：

   <div className="image-grid">
                {data.home.galleryImage.map((image, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                       <img src={image.url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

现在您的可迭代对象是image（更有意义），其中包含galleryImage 数组，因此要访问嵌套属性，您需要获取image.url。

在声明可迭代变量时，您可以使用析构来保留以前的方法：

   <div className="image-grid">
                {data.home.galleryImage.map(({url}) => (
                      <div className="image-item" key={`${url}-cl`}>
                       <img src={url} alt={"no alt :("} />
                      </div>
                ))
                }
   </div>

更多信息请查看map docs。

【讨论】：