0

我有一个名为 AlbumCard.js 的组件。在我的 AlbumList.js 组件中，我通过 Array 进行映射并创建多个 AlbumCards 组件。每个 AlbumCard 都有自己的 id（基本上就是专辑的 data.id）

应该可以单击一个 AlbumCard 并进入下一页，在那里您可以看到包含更多信息的整个 AlbumCard（将数据传递给下一个组件）。

我的想法是，通过单击一个 AlbumCard 来获取 id(data.id)，使用该 id(data.id) 发出获取请求，将返回的数据存储在我的 redux 存储中，并将其显示在我的下一个组件 (AbumPage .js）。不幸的是，该组件在我的状态更新之前被渲染。所以我第一次去那个页面时遇到了一个未定义的错误。如果我刷新一切正常，因为数据已经存在。我还在 AlbumCard 组件中使用了 asnyc onClick 函数。（我不知道如何构建一个在该组件之外获取该组件的 id(data.id) 的 onClick 函数）。

我也尝试了条件渲染，但没有帮助）

专辑卡.js

function AlbumCard({ url, albumname, onClick }) {
 // I am passing the onClick handler as a prop
 // My first idea, was to give the div.id the value of the album.id aka data.id as a prop, but I did not know how to get that data later (id = {data.id}) 

  return (
    <>
      <div className='dark:bg-gray-900 sm:m-2 sm:w-40 w-24 m-1 transition duration-200 bg-white rounded-lg shadow-md'>
        <div onClick={onClick} id='hi' className='group relative rounded-lg'>

专辑列表.js

 function AlbumList(props) {
const onClick = (event) => {// not working 
    props.fetchAlbum(event.target.id) // not working 
  }

  return (
    <section className='sm:flex sm:justify-between sm:flex-nowrap grid grid-cols-3'>
      {view === 'noSearch' ? (
        <>
          {newreleases.slice(0, 5).map((data) => (
            <AlbumCard
              url={data.images[0].url}
              key={data.id}
              id={data.id}
              albumname={data.name}
              onClick={async () =>
                props.fetchAlbum(data.id) && (await history.push('/home/album'))
              }
            />
          ))}
        </>

fetchAlbum 函数

export const fetchAlbum = (id) => async (dispatch) => {
  dispatch({
    type: FETCH_ALBUM_PENDING,
  })
  await saxios
    .get(`/albums/${id}`)
    .then((res) => {
      console.log(res.data)
      dispatch({
        type: FETCH_ALBUM_SUCCESS,
        payload: res.data,
      })
    })

    .catch((err) => {
      console.log(err)
      dispatch({
        type: FETCH_ALBUM_ERROR,
      })
    })
}

专辑页面.js

    function AlbumPage(props) {
      const album = useSelector((state) => state.album.currentAlbum) // getting called, before 
          the state updates

...

return (
   <img className=' w-full' src={album?.images[0]?.url} alt='..' />) // I am getting an undefined error
4

1 回答 1

0

在AlbumList.js中，您需要调用onClick如下函数：-

 function AlbumList(props) {
const onAlbumCardClick = (dataId) => { 
    props.fetchAlbum(dataId)
    history.push('/home/album')
  }

  return (
    <section className='sm:flex sm:justify-between sm:flex-nowrap grid grid-cols-3'>
      {view === 'noSearch' ? (
        <>
          {newreleases.slice(0, 5).map((data) => (
            <AlbumCard
              url={data.images[0].url}
              key={data.id}
              id={data.id}
              albumname={data.name}
              onClick={() => onAlbumCardClick(data.id)}
            />
          ))}
        </>

根据FETCH_ALBUM_PENDING值，您可以显示加载器，AlbumPage如下所示：-

return (
  <div>
    {fetchAlbumPending ?  <div>Loader</div>  :  <img className=' w-full' src={album?.images[0]?.url} alt='..' />
  </div>
)
于 2021-05-24T11:40:23.313 回答