我需要你的幫助。我有一個帶有代碼的 js 檔案，其中我有一個組件 - Home. 在這個組件中，我試圖從陣列中獲取物件并使用標簽和選項users按升序和降序對它們進行排序。select我正在嘗試這樣做，但我仍然無法做到。你能幫我嗎：如何對這個陣列進行排序以及如何根據順序在頁面中呈現這個物件？非常感謝你
import React, {useState} from "react";
export let Home = () => {
const users = [
{id: 1, name: "One"},
{id: 2, name: "Two"},
{id: 3, name: "Three"}
];
const [arrayToTop] = useState(users);
const [arrayToBottom] = useState(users);
arrayToTop.sort((a,b) => {
return a.id - b.id;
})
arrayToBottom.sort((a,b) => {
return b.id - a.id;
})
return (<div>
<select>
<option value={arrayToTop}>To top</option>
<option value={arrayToBottom}>To bottom</option>
</select>
</div>)
}
uj5u.com熱心網友回復：
大衛指出的很多問題。您需要使用state來管理用戶以及update state在選擇中更改排序方向時。這很簡單。作業樣本 -
const {useState} = React;
function App() {
const [users, setUsers] = useState([
{ id: 1, name: "One" },
{ id: 2, name: "Two" },
{ id: 3, name: "Three" }
]);
function onSelectionChange(e) {
const sortDirection = e.target.value;
const copyArray = [...users]; // create a new array & not mutate state
copyArray.sort((a, b) => {
return sortDirection === "0" ? a.id - b.id : b.id - a.id;
});
setUsers(copyArray); //re-render
}
return (
<div className="App">
<select defaultValue={0} onChange={onSelectionChange}>
<option value={0}>Ascending</option>
<option value={1}>Descending</option>
</select>
{users.map((user) => (
<div key={user.id}>
{user.id} - {user.name}
</div>
))}
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react">uj5u.com熱心網友回復：
要讓反應知道狀態已更新，僅排序是不夠的，您必須使用 setState()，但整體代碼不清楚排序并顯示在選項中？我相信這是你想要的。
const [order,setOrder] = useState('asc');
const [arraySorted,setarraySorted] = useState(users);
const handler = (e)=>{
setOrder(e.target.value);
const sortedarray = arraySorted.sort((a,b) => {
return order === 'asc'? (a.id - b.id): (b.id - a.id);
})
setarraySorted([...sortedarray])}
您必須為
<select onChange={handler} value={order} >
<option value='asc'>To top</option>
<option value='dsc'>To bottom</option>
</select>
所以只有在需要時才重新渲染，并在 div .list 中顯示排序的陣列，表格格式 whaterevr 你真正想要的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471910.html
上一篇：將4個已排序的陣列合并為一個