[英]How to sort an array of objects in reactjs/nextjs with props?
I am trying to sort through an array of objects from an API call.我正在尝试对来自 API 调用的对象数组进行排序。 I've tried a few things and they haven't worked.
我已经尝试了一些东西,但它们没有奏效。 Currently what I have tried is to sort the array first and then map through it and then display it.
目前我尝试的是先对数组进行排序,然后通过它对 map进行排序,然后显示它。 The mapping works but not the sorting.
映射有效,但排序无效。
This is the object这是 object
{
"labels_url": "https://api.github.com/repos/jaystack/repatch/labels{/name}",
"releases_url": "https://api.github.com/repos/jaystack/repatch/releases{/id}",
"deployments_url": "https://api.github.com/repos/jaystack/repatch/deployments",
"created_at": "2017-06-25T20:50:11Z",
}
However, no sorting is taking place.但是,没有进行排序。 The timestamp is in this format:
"2017-06-25T20:50:11Z"
时间戳采用以下格式:
"2017-06-25T20:50:11Z"
When I isolated this into an array, the timestamps were sorted.当我将它隔离到一个数组中时,时间戳被排序。 See below.
见下文。
const sortedData = ["2017-06-25T20:50:11Z","2018-06-25T20:50:11Z", "2019-06-25T20:50:11Z", "2020-06-25T20:50:11Z"];
//sorted the data with a simple function for comparing
sortedData.sort(function(a,b){return a - b})
console.log(sortedData);
[
"2017-06-25T20:50:11Z",
"2018-06-25T20:50:11Z",
"2019-06-25T20:50:11Z",
"2020-06-25T20:50:11Z"
]
However, I tried chaining the.map method after this, it didn't work.但是,我尝试在此之后链接 .map 方法,但没有成功。 This is what I have so far -
这是我到目前为止所拥有的 -
<div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white">
{data.items.sort(function(a,b) {return a.created_at - b.created_at})
.map((d,t,s,u,p)=> (
<div key={p} className=" border-red-600 p-5">
<h1 key={t} className="text-2xl font-bold">{d.name}</h1>
<p key={d} className="mb-5">{d.description}</p>
<p key={s} >{d.score}</p>
<p>{d.created_at}</p>
<Link key={u} href={d.html_url}>
<a className="bg-white text-black font-bold rounded-lg">Click me</a>
</Link>
</div>
))}
I suspect it is a path issue.我怀疑这是一个路径问题。 I've tried changing the return statement like removing the 'created_at' or swapping the arguments.
我尝试更改返回语句,例如删除“created_at”或交换 arguments。 What am I missing?
我错过了什么? Do I need to push them into a separate array and then map through them again?
我是否需要将它们推入一个单独的阵列,然后 map 再次通过它们?
I hope this was enough information.我希望这是足够的信息。
SOLVED --解决了 -
it was missing 'new Date'它缺少“新日期”
{data.items.sort(function(a,b) {return a.created_at > b.created_at}).map((b)=>
<div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white">
{data.items.sort(function(a,b) {return new Date (b.created_at) - new Date(a.created_at)})
.map((d)=> (
<div key={d.id} className=" border-red-600 p-5">
<h1 className="text-2xl font-bold">{d.name}</h1>
<p className="mb-5">{d.description}</p>
<p>{d.created_at}</p>
<Link href={d.html_url}>
<a className="bg-white text-black font-bold rounded-lg">Click me</a>
</Link>
</div>
))}
The callback function .map((d,t,s,u,p)=> (
takes 5 arguments but map's callback function only takes 3 arguments they are in sequence The callback function
.map((d,t,s,u,p)=> (
takes 5 arguments but map's callback function only takes 3 arguments they are in sequence
Also, in your case it is sufficient to pass a unique key to div
tag.此外,在您的情况下,将唯一键传递给
div
标签就足够了。
Update 1 Rearrange your sort and map code like below,更新 1重新排列您的排序和 map 代码,如下所示,
{
data.items.sort(function(a,b) {return a.created_at - b.created_at})
.map(d => <div key={d.id} className=" border-red-600 p-5">
<h1 className="text-2xl font-bold">{d.name}</h1>
<p className="mb-5">{d.description}</p>
<p>{d.score}</p>
<p>{d.created_at}</p>
<Link href={d.html_url}>
<a className="bg-white text-black font-bold rounded-lg">Click me</a>
</Link>
</div>)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.