如何從對象數組中獲取精確的 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)}
  />
))