无法在react中的map函数内应用map函数

Question

当我尝试将map函数应用到react上的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>
   )
}