React Component 在 store 更新之前得到渲染

Question

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

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

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

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

AlbumCard.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'>

AlbumList.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,
      })
    })
}

AlbumPage.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

Answer 1

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

React Component 在 store 更新之前得到渲染

React Component gets render before store updates

reactjs

redux

onclick

rendering