我有一个名为 AlbumCard.js 的组件。 在我的 AlbumList.js 组件中,我通过一个数组进行映射并创建多个 AlbumCards 组件。每个 AlbumCard 都有自己的 id(基本上就是专辑的 data.id)
应该可以点击一个 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
答案 0 :(得分: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>
)