React 组件在商店更新之前得到渲染答案

【问题标题】：React Component gets render before store updatesReact 组件在商店更新之前得到渲染
【发布时间】：2021-05-24 10:41:26
【问题描述】：

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

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

我的想法是，通过单击一个 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

【问题讨论】：

您在 api 调用之前调度 FETCH_ALBUM_PENDING，因此如果 api 正在获取数据，最好使用其中的值并在 AlbumPage 中显示一些加载器。
你的意思是做一个加载器，而 FETCH_ALBUM_PENDING 是真的？
是的，我的意思是在 FETCH_ALBUM_PENDING 为真时显示加载程序。这是最可取的方法。
{fetchAlbumPending ? (
Loader
) : ( ) 太棒了，谢谢！！
你知道吗，我怎样才能以正确的方式获取 data.id。这样我就不必在组件内创建 onClick 了吗？

标签： reactjs redux onclick rendering

【解决方案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>
)

【讨论】：