如何使用React(Rails)遍历数组 [英] How to iterate through an array with React (Rails)

问题描述

我才刚刚开始学习React，我试图弄清楚如何找到自己想要的特定值.就像您在Ruby中具有each.do方法并可以遍历数组一样，我正在尝试使用React来实现.

I just started to learn React and I am trying to figure out how to find a specific value I am looking for. Just like you have the each.do method in Ruby and you can iterate through an array, I'm trying to do that with React.

class Gallery extends React.Component {
  render () {
    // debugger;
    return (
      <div>
      <img> {this.props.gallery.thumbnail_url} </img>
      </div>
    )
  }
}

我正在尝试访问thumbnail._url，使用调试器时，我无法访问所有对象和图像.我想到了this.props.gallery.object.thumbnail_url和其他想法，但我真的不确定最好的方法！

I am trying to access the thumbnail._url and when using the debugger, I am not able to access all the objects and images. I thought of this.props.gallery.object.thumbnail_url and other ideas but I am not really sure of the best way!

推荐答案

使用 Array.prototype.map()映射数据以反应元素.并不是说在循环中呈现的元素需要唯一的标识符(键)，以使重新渲染列表的性能更高.

Use Array.prototype.map() to map the data to react elements. Not that elements rendered in a loop require a unique identifier (keys), to make rerendering list more performant.

class Gallery extends React.Component {
  render () {
    const { gallery = [] } = this.props; // destructure the props with a default (not strictly necessary, but more convenient) 

    return (
      <div>
      {
       gallery.map(({ id, thumbnail_url }) => (
         <img key={ id } src={ thumbnail_url } />
       ))
      }
      </div>
    )
  }
}

这篇关于如何使用React(Rails)遍历数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！