无法在 REACT 的地图函数中应用地图函数

Question

当我尝试在 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>
   )
}