Question

当我尝试在react上将map函数应用于html时遇到问题。这是我的代码：

response = [
  data : {
    name: 'john',
    title: 'john doe',
    images: {
      slider: {
        desktop: 'link1',
        mobile: 'link2'
      },
      carrousel: {
        desktop: 'link1',
        mobile: 'link2'
      }
    }
  },
  data: {
    name: 'Mary',
    title: 'Mary doe',
    images: {
      slider: {
        desktop: 'link1',
        mobile: 'link2'
      },
      carrousel: {
        desktop: 'link1',
        mobile: 'link2'
      }
    }
  }
]

然后我应用lodash来选择信息：

 const all = _
      .chain(response)
      .filter(item => item)
      .flatMap(data => data)
      .map(item => _.pick(item, ['name', 'title','images']))
      .value()

现在我在html上申请：

return (
    all.map((element, index) => (
     <div className='content' key={index}>
        <h1>{element.name}</h1>
        <h2>{element.title}</h1>
      {
        _.filter(element => element.images_group != 
        undefined).map(image => image.slider).map(element => (
          <img alt='' src={element.desktop} key={index} />
        ))
       }
     </div>
     ))
  })

它不会返回错误，只是不显示任何图像..它不会出现在HTML中。

谢谢！

Answer 1

我很确定是因为您没有将地图用括号括起来。返回后的所有JavaScript变量，函数等都必须放在方括号中。

Answer 2

首先，我不清楚您的回复结构。如果您的响应是一个对象数组，那么您就需要取消data键。

response = [
 {
   name: 'john',
   title: 'john doe',
   images: {
    slider: {
     desktop: 'link1',
     mobile: 'link2'
    },
    carrousel: {
     desktop: 'link1',
     mobile: 'link2'
    }
 }
},
 {
  name: 'Mary',
  title: 'Mary doe',
  images: {
   slider: {
    desktop: 'link1',
    mobile: 'link2'
  },
   carrousel: {
     desktop: 'link1',
     mobile: 'link2'
   }
  }
 }
]

您只需要将lodash的jsx输出分配给变量，然后使用花括号将输出呈现

renderData (){
   const all = _
  .chain(response)
  .filter(item => item)
  .flatMap(data => data)
  .map(item => _.pick(item, ['name', 'title','images']))
  .value();

    const allData 
      = all.map((element, index) => (
      <div className='content' key={index}>
           <h1>{element.name}</h1>
          <h2>{element.title}</h2>
      {
       _.filter(element => element.images_group 
          != undefined)
       .map(image => image.slider).map(element => (
         <img alt='' src={element.desktop} key={index} />
      ))
      }
      </div>
   ))
   return (
     <div>{allData}</div>
   )
}

无法在反应中的地图功能内应用地图功能

2 个答案: