如何对其中包含随机生成的数字的卡片列表进行排序？
Posted
技术标签:
【中文标题】如何对其中包含随机生成的数字的卡片列表进行排序？【英文标题】：How can I sort a list of cards with randomly generated numbers inside of them? 【发布时间】：2021-05-31 16:36:41 【问题描述】：我在按下按钮时生成卡片。这些卡片有一个随机生成的数字，介于 0 到 100 之间。我正在尝试设置一个组件或函数，当我单击排序按钮时，它允许我按数字顺序升序或降序或同时对所有这些卡片进行排序。我已经尝试了以下代码。请记住，这都包含在同一个 App 组件中。
随机数在加卡组件中生成。
我觉得我非常接近，但我无法弄清楚我错过了什么。
const sortTypes =
up:
class: "sort-up",
fn: (a, b) => a.number - b.number,
,
down:
class: "sort-down",
fn: (a, b) => b.number - a.number,
,
default:
class: "sort",
fn: (a, b) => a,
,
;
const sortAll = () =>
state =
currentSort: 'default'
;
onSortChange = () =>
const currentSort = this.state;
let nextSort;
if (currentSort === 'down') nextSort = 'up';
else if (currentSort === 'up') nextSort = 'default';
else if (currentSort === 'default') nextSort = 'down';
this.setState(
currentSort: nextSort
);
;
;
return (
<body>
<header>
<div className="ui buttons">
<button type="button" onClick=addCard className="ui button mb-1 mt-1 mr-1"><i className="plus icon"></i>Add Card</button>
<div className="or mb-1 mt-1"></div>
<button type="button" onClick=sortAll className="ui positive button mb-1 mt-1 mr-1"><i className="redo icon"></i>Sort All</button>
</div>
</header>
【问题讨论】：
如果你能沙箱这个会很棒。sortAll 有点像一个反应组件，它的名字不像一个，但它有状态......但你作为回调附加？ onSortChange 在哪里调用以“选择”您要使用的排序功能？您在哪里应用任何排序功能？
codesandbox.io/s/exciting-mirzakhani-nw5ow?file=/src/index.js
有一个指向代码框的链接。 onSortChange 在第 72 行。排序功能应该在第 94 行应用。
我觉得我开始做的很正确，但我从来没有在 React 中做过这样的事情，所以我不确定一切都需要去哪里。
【参考方案1】：
问题
-
功能组件是“无实例的”，因此没有定义的
this 可供参考。
onSortChange 是您要用于更新当前排序的按钮 onClick 处理程序。
解决方案
将currentSort 移动到useState 挂钩中的组件状态。
const [currentSort, setCurrentSort] = useState("default");
修复 onSortChange 处理程序以正确更新状态。
const onSortChange = () =>
let nextSort;
if (currentSort === "down") nextSort = "up";
else if (currentSort === "up") nextSort = "default";
else if (currentSort === "default") nextSort = "down";
setCurrentSort(nextSort);
;
在渲染返回中使用内联“排序”。请记住，array.prototype.sort 是一种就地排序，即它会改变数组。为了避免意外改变状态，首先复制数组。
cards
.slice() // <-- copy
.sort(sortTypes[currentSort].fn) // <-- select sort function
.map((cardNumber, index) => (
<MainCard
number=cardNumber.number
key=cardNumber.id
onRemove=() => removeCard(cardNumber.id)
/>
))
将正确的处理程序附加到按钮
<button
type="button"
onClick=onSortChange
className="ui positive button mb-1 mt-1 mr-1"
>
<i className="redo icon"></i>Sort All
</button>
演示
完整代码：
const generateId = (seed = 0) => () => seed++;
const getRandomNumber = function (min, max)
let getRandom = Math.floor(Math.random() * max + min);
return getRandom;
;
const sortTypes =
up:
class: "sort-up",
fn: (a, b) => a.number - b.number
,
down:
class: "sort-down",
fn: (a, b) => b.number - a.number
,
default:
class: "sort",
fn: (a, b) => a
;
const MainCard = ( number, onRemove ) =>
return (
<div className="card">
<button
onClick=onRemove
className="ui mini red basic icon button"
style=
position: "absolute",
top: "0",
right: "0"
>
X
</button>
number
</div>
);
;
export default function App()
const [cards, setCards] = useState([]);
const [currentSort, setCurrentSort] = useState("default");
const addCard = () =>
setCards((cards) => [
...cards,
id: generateId(),
number: getRandomNumber(0, 101)
]);
;
const removeCard = (id) =>
setCards((cards) => cards.filter((el) => el.id !== id));
;
const onSortChange = () =>
let nextSort;
if (currentSort === "down") nextSort = "up";
else if (currentSort === "up") nextSort = "default";
else if (currentSort === "default") nextSort = "down";
setCurrentSort(nextSort);
;
return (
<body>
<header>
<div className="ui buttons">
<button
type="button"
onClick=addCard
className="ui button mb-1 mt-1 mr-1"
>
<i className="plus icon"></i>Add Card
</button>
<div className="or mb-1 mt-1"></div>
<button
type="button"
onClick=onSortChange
className="ui positive button mb-1 mt-1 mr-1"
>
<i className="redo icon"></i>Sort All
</button>
</div>
</header>
<div className="card-container">
cards
.slice()
.sort(sortTypes[currentSort].fn)
.map((cardNumber) => (
<MainCard
number=cardNumber.number
key=cardNumber.id
onRemove=() => removeCard(cardNumber.id)
/>
))
</div>
<aside className="showHide"></aside>
<footer>
<h3 className="text-center text-muted">Footer</h3>
</footer>
</body>
);
【讨论】：
以上是关于如何对其中包含随机生成的数字的卡片列表进行排序？的主要内容，如果未能解决你的问题，请参考以下文章