你能对一组反应组件进行排序吗？访问反应组件的信息
Can you sort an array of react components? Accessing info of react componenet
我有一个 post 的数组，我试图按日期排序 - 我不知道如何访问日期，因为数组是反应组件的列表，而不是对象.这是代码现在的工作方式...
用户搜索 'bands' 并创建一个包含所有 band 对象的数组。每个 band 对象在 band.posts 中有一堆 post。因此，为了从所有波段中获取所有 posts，我通过所有波段进行映射，然后对于每个波段，我通过它们的所有 posts 进行映射。每个 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}
我使用了 .forEach() 来 console.log 每个 post - 它 returns 反应组件的 console.log ...日期位于 props.post.date
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)
所以我尝试了这个...你知道如何访问这个日期以便我可以按日期对这个 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
})
}
}).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;
}
}
}
}
Post 格式 -
{
"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/ \n\nDon't forget to follow us for all things music!\n*\n*\n*\n*\n#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",
}
为什么不在映射到 post 组件之前先对对象进行排序？
{
bandTypes === "all"
? allBands
.map((band) => {
if (
band.youtube.length > 0 &&
band.bandBio !== "n/a" &&
band.bandGenre !== "n/a"
) {
return band.posts;
}
})
.sort((a, b) => b.date - a.date)
.map((post) => {
let currPost = convertPost(post, band);
return currPost;
})
: null;
}
你首先要做的是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;
}
您可以找到有关 reduce here 的更多信息。
我有一个 post 的数组，我试图按日期排序 - 我不知道如何访问日期，因为数组是反应组件的列表，而不是对象.这是代码现在的工作方式...
用户搜索 'bands' 并创建一个包含所有 band 对象的数组。每个 band 对象在 band.posts 中有一堆 post。因此，为了从所有波段中获取所有 posts，我通过所有波段进行映射，然后对于每个波段，我通过它们的所有 posts 进行映射。每个 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}
我使用了 .forEach() 来 console.log 每个 post - 它 returns 反应组件的 console.log ...日期位于 props.post.date
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)
所以我尝试了这个...你知道如何访问这个日期以便我可以按日期对这个 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
})
}
}).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;
}
}
}
}
Post 格式 -
{
"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/ \n\nDon't forget to follow us for all things music!\n*\n*\n*\n*\n#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",
}
为什么不在映射到 post 组件之前先对对象进行排序？
{
bandTypes === "all"
? allBands
.map((band) => {
if (
band.youtube.length > 0 &&
band.bandBio !== "n/a" &&
band.bandGenre !== "n/a"
) {
return band.posts;
}
})
.sort((a, b) => b.date - a.date)
.map((post) => {
let currPost = convertPost(post, band);
return currPost;
})
: null;
}
你首先要做的是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;
}
您可以找到有关 reduce here 的更多信息。