如何从对象数组中获取精确的 id？

Question

制作应用程序（react + redux）。 它包含几张照片。 当你点击一张照片时，你会得到一个带有更大照片和评论的模态 window。

应用组件是：

class App extends Component {
  componentDidMount() {
    const { getPhotos } = this.props
    getPhotos()
  }

  getPhoto = (id) => {
    const { openModal } = this.props
    openModal(id)
  }

  render() {
    const { photos, isOpen, isFetching } = this.props
    return (
      <div className="container">
        <Header />
        <div className="list__content">
          {isFetching ? (
            <p>Loading...</p>
          ) : (
            photos.map((photo) => (
              <List
                key={photo.id}
                src={photo.url}
                id={photo.id}
                onClick={this.getPhoto}
              />
            ))
          )}
        </div>
        <Footer />
        {isOpen && <ModalContainer />}
      </div>
    )
  }
}

export default connect(
  ({ photos, modal }) => ({
    photos: photos.photos,
    isFetching: photos.isFetching,
    isOpen: modal.isOpen,
  }),
  { getPhotos, openModal }
)(App)

列表组件：

const List = ({ src, onClick }) => {
  return (
    <div className="list__item">
      <img src={src} alt={src} onClick={onClick} />
    </div>
  )
}

export default List

您可以在 List 组件中看到道具onClick={this.getPhoto} 。 如果我像这样onClick={this.getPhoto(photo.id)}更改它，它将无法正常工作，因为它会获取所有照片的 id 并在我的模态 window 中（一张一张）显示它们。

那么，在这种情况下，如何使用我的方法getPhoto获取照片的精确 ID？

Answer 1

将调用 getPhoto 的 onClick 设置为getPhoto

photos.map((photo) => (
  <List
    key={photo.id}
    src={photo.url}
    id={photo.id}
    onClick={() => this.getPhoto(photo.id)}
  />
))