我正在嘗試反轉從 js 檔案匯入的物件陣列。現在，它僅在我將陣列直接放入要顯示該資料的組件中時才有效，而不是在我從另一個檔案中匯入它時。我不知道是什么問題，如果我需要提供一些額外的資訊，請告訴我！
我在 js 檔案中有這樣構造的資料：
const projects = [
{
id: 1,
title: "React Tv-show App",
url: "url",
image: "image",
},
{
id: 2,
title: "React Landing Page",
url: "url",
image: "image",
},
etc..]
export default projects;
我要顯示和反轉資料的組件如下所示：
import data from "./projects";
export default function ProjectsView() {
const projects = data.reverse();
return (
<div className="projectsView">
<h1 className="projectsTitle">Projects</h1>
<div className="projectsRow">
{projects.map((project) => {
return (
<Project
key={project.id}
title={project.title}
url={project.url}
image={project.image}
/>
);
})}
</div>
</div>
);
}
我也在渲染中嘗試了 projects.reverse().map() 但這也不起作用。
uj5u.com熱心網友回復：
結果不符合預期，因為reverse()將陣列反轉到位。這意味著它不會創建反向副本，而是反向接收器（您呼叫該方法的陣列）。所以data對于完成的每個渲染都是相反的。
如果您呼叫reverse()兩次，您將得到原始訂單。所以渲染的數量決定了順序。如果組件被渲染奇數次陣列被反轉，如果渲染偶數次陣列將具有原始順序。
為了防止這種情況發生，您不應該改變原始陣列，而是創建一個反向副本。這將意味著更改以下內容：
const projects = data.reverse();
應該：
const projects = Array.from(data).reverse();
這首先創建一個淺拷貝，然后反轉。因為你永遠不會改變/變異data，所以每次渲染都會產生相同的輸出——不管它被呼叫多少次。
該useMemo掛鉤也可以用于提高性能。
const projects = useMemo(() => Array.from(data).reverse(), [data]);
Array.from(data).reverse()只要data保持不變，這將重復使用結果。如果沒有useMemo鉤子，則必須為完成的每個渲染制作反向副本。
uj5u.com熱心網友回復：
array.reverse() 就地反轉陣列，因此您的陣列在每次渲染時都會反轉。
使用const projects = [...data].reverse();來代替。這將創建一個新陣列，而不是改變現有陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369262.html
標籤：javascript 数组 反应 排序
上一篇：如何在JS中映射嵌套陣列