如何使用React（Rails）遍历数组

Question

我刚刚开始学习React，我正在试图找出如何找到我正在寻找的特定值。就像你在Ruby中使用each.do方法一样，你可以迭代一个数组，我试图用React做到这一点。

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

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

Answer 1

使用Array.prototype.map()将数据映射到反应元素。并非循环中呈现的元素需要唯一标识符（keys），以使重新呈现列表更具性能。

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>
    )
  }
}

Answer 2

您可以这样做：

class Gallery extends React.Component {
  render () {
    // initialize 'images' to empty array if this.props.gallery is undefined
    // other wise 'images.map' will throw error
    const images = this.props.gallery || []; 

    return (
      <div>
        {images.map((image, index) => <img src={image.thumbnail_url} key={index} />)}
      </div>
    )
  }
}

您可能已经注意到道具key={index}。如果省略，则会看到警告：

  

数组或迭代器中的每个子项都应该有一个唯一的“key”prop

实际上它并没有作为道具传递给组件，而是被React用来帮助收集对帐。这样React可以处理最小的DOM更改。