您能对Reaction组件的数组进行排序吗？访问Reaction组件网络的信息 [英] Can you sort an array of react components? Accessing info of react componenet
本文介绍了您能对Reaction组件的数组进行排序吗？访问Reaction组件网络的信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试按日期对帖子数组进行排序--但我不知道如何访问该日期，因为该数组是Reaction组件的列表，而不是对象。以下是代码现在的工作方式...
用户搜索‘band’并创建一个包含所有band对象的数组。每个band对象在band.post中都有一组帖子。因此，为了获得所有频段中的所有帖子，我通过所有频段映射，然后对于每个频段，我通过其所有帖子进行映射。然后，每个POST都会通过函数‘ConvertPost()’将其转换为组件。我现在有了一个POST组件数组。这就是我想要分类的。以下是完成所有这些任务的代码-
{bandTypes === 'all' ? allBands.map(band => {
if(band.youtube.length > 0 && band.bandBio !== 'n/a' && band.bandGenre !== 'n/a'){
return band.posts.map(post => {
let currPost = convertPost(post, band)
return currPost
})
}
}).forEach(post => console.log(post)) : null}
0:
$$typeof: Symbol(react.element)
key: "NOLA DUDES"
props:
addFavorites: (userId, band) => {…}
band: {quoteGenerator: Array(0), youtube: Array(1), posts: Array(2), favorites: Array(1), _id: "5eb20ce78b8cee4494eb44a0", …}
bandBio: "This is my new band bioThis is my new band bioThis is my new band bioThis is my new band bioThis is my new band bioThis is my new band bio"
bandName: "NOLA DUDES"
favorites: ["5e8b54337d9c710ca6f117fa"]
id: "5eb20ce78b8cee4494eb44a0"
post:
approved: null
data: ""
date: "2020-05-06T01:03:35.818Z"
postId: "55445155-0690-46d4-a3bb-4cfd2ea160c3"
rockOn: []
type: "band"
__proto__: Object
youtube: ["4_eLn4B9MzQ"]
key: (...)
get key: ƒ ()
__proto__: Object
ref: null
type: ƒ BandCard(props)
_owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: null
_source: {fileName: "/Users/NickMcLean/Desktop/REACT/AutoQuoteGenerator…t/src/components/Profile/SearchInputs/MainFeed.js", lineNumber: 209, columnNumber: 25}
__proto__: Object
1: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
length: 2
__proto__: Array(0)
所以我试了一下...你知道如何访问这个日期，这样我就可以按日期对这组帖子进行排序了吗？我知道这不是访问道具的正常方式...
{bandTypes === 'all' ? allBands.map(band => {
if(band.youtube.length > 0 && band.bandBio !== 'n/a' && band.bandGenre !== 'n/a'){
return band.posts.map(post => {
let currPost = convertPost(post, band)
return currPost
})
}
}).sort((a, b) => b.props.post.date - a.props.post.date) : null}
我还尝试在执行‘ConvertPost()’函数之前对对象进行排序...但转换POST函数需要‘band’参数才能工作，该参数只能在地图中找到。
{bandTypes === 'all' ? allBands.map(band => {
if(band.youtube.length > 0 && band.bandBio !== 'n/a' && band.bandGenre !== 'n/a'){
return band.posts.map(post => {
return post
})
}
}).sort((a, b) => b.date - a.date).forEach(post => {
let currPost = convertPost(post, band)
return currPost
}) : null}
下面是ConvertPosts函数
const convertPost = (post, band) => {
if(genre === 'Genre'){
switch (post.type) {
case "video":
return (
<VideoPosts key={post.postId} addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} link={post.data} band={band} post={post} _id={band._id} />
)
case "text":
return (
<FeedPosts key={post.postId} addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} band={band} post={post} _id={band._id}/>
)
case "show":
return (
<ShowsPosts key={post.postId} addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} band={band} post={post} _id={band._id}/>
)
case "band":
return (
<BandCard id={band._id} key={band.bandName} youtube={band.youtube} bandName={band.bandName} bandBio={band.bandBio} post={post} addFavorites={addFavorites} favorites={band.favorites} band={band} />
)
case 'instagram':
return (
<InstagramPosts key={post.postId} addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} band={band} post={post} _id={band._id} />
)
default:
return null;
}
}else {
if(band.bandGenre === genre ){
switch (post.type) {
case "video":
return (
<VideoPosts addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} link={post.data} band={band} post={post} />
)
case "text":
return (
<FeedPosts addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} band={band} post={post} _id={band._id} />
)
case "show":
return (
<ShowsPosts addFavorites={addFavorites} favorites={band.favorites} addRockOn={addRockOn} band={band} post={post} _id={band._id}/>
)
case "band":
return ( <BandCard id={band._id} key={band.bandName} youtube={band.youtube} bandName={band.bandName} bandBio={band.bandBio} addFavorites={addFavorites} favorites={band.favorites} band={band}/>
)
default:
return null;
}
}
}
}
发布格式-
{
"type": "instagram",
"data": "https://scontent-dfw5-1.xx.fbcdn.net/v/t51.2885-15/94831976_156494885869068_8673191033070945504_n.jpg?_nc_cat=103&_nc_sid=8ae9d6&_nc_ohc=BOk-_e1RMVwAX-w2ywz&_nc_ht=scontent-dfw5-1.xx&oh=f19acf2fab558ce0d2a79fba3d90db71&oe=5EE1F652",
"link": "http://www.instagram.com/on_deband_booking",
"date": "2020-04-28T16:32:40+0000",
"postId": "18033963559249859",
"rockOn": []
},
{
"type": "text", //Really this is facebook
"data": "Have you gotten that special someone, or...someone's, a valentine yet (we mean your favorite local bands)? This Valentine On DeBand is giving you a way to say thank you and show your appreciation to local bands and artists with a special gift (or you can gift it to yourself if you want, no harm in treating yo self)! Tomorrow is the big day, just follow this link: https://www.ondeband.com/happy-valentines/
Don't forget to follow us for all things music!
*
*
*
*
#ondeband #band #music #valentines #specialsomeone #local #localmusic #localband #venue #rockshow #rock #country #metal #pop #punk #emo #love #gratitude #happyheartday",
"link": "http://www.facebook.com/107460777308513_199513551436568",
"date": "2020-02-13T16:14:34+0000",
"postId": "107460777308513_199513551436568",
"rockOn": []
},
{
"type": "band",
"data": "",
"date": "2020-05-05T23:43:53.002Z",
"postId": "c51295fe-14b0-4a19-9cc3-87da2a28c93f",
"approved": null,
"rockOn": []
},
{
"type": "video",
"data": "PuBqEdb464g",
"date": "2020-05-05T22:40:23.958Z",
"postId": "af28c07e-49cb-4b3c-9c6e-452112e1026a",
"rockOn": []
},
{
"date": "2020-05-05T22:54:59.673Z",
"type": "show",
"client": "email",
"clientId": "5e8b54337d9c710ca6f117fa",
}
推荐答案
您首先要做的是reduce将allBands数组变成一个包含所有帖子的数组，而不需要任何嵌套。要同时保留post和band值，只需将它们组合成单个对象即可。然后您可以按日期sort它，但它是在您的数据中表示的。
使用已创建的组件执行任何操作通常不是一个好主意，我不鼓励这样做。
代码如下：
{
bandTypes === "all"
? allBands
.reduce(
(allPosts, band) =>
allPosts.concat(
(band.youtube.length > 0 &&
band.bandBio !== "n/a" &&
band.bandGenre !== "n/a")
? band.posts.map((post) => ({ post, band }))
: []
),
[]
)
.sort((a, b) => new Date(b.post.date) - new Date(a.post.date))
.map(({ post, band }) => convertPost(post, band))
: null;
}
您可以找到有关Reducehere的更多信息。
这篇关于您能对Reaction组件的数组进行排序吗？访问Reaction组件网络的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
