在react中使用函数组件排序

Question

我已经在React类组件中这样做了，但我需要在React函数组件中这样做，因为我想学习将类组件转换为函数组件。

onSortByPlatformAsc = () => {
var sortByPlatform = this.state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
this.setState({ listGames: sortByPlatform });
};
onSortByPlatformDesc = () => {
var sortByPlatform = this.state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
this.setState({ listGames: sortByPlatform.reverse() });
};

Answer 1

在功能组件中这样做几乎是相同的，除了您设置状态的部分。您将拥有一个状态值和一个使用useState钩子设置状态的函数，如下所示:

const [games, setGames] = useState({
listGames:[]
})

然后你所需要做的就是调用setGames函数并设置你想要设置的值，如下所示

onSortByPlatformAsc = () => {
var sortByPlatform = this.state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setGames({ listGames: sortByPlatform });
};
onSortByPlatformDesc = () => {
var sortByPlatform = this.state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setGames({ listGames: sortByPlatform.reverse() });
};

希望这能回答你的问题。

Answer 2

为了在功能组件中使用状态，你应该使用useState()钩子。功能成分中没有this关键字

import { useState } from 'react';
const [listGames, setListGames] = useState([])
onSortByPlatformAsc = () => {
var sortByPlatform = listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setListGames(sortByPlatform);
};
onSortByPlatformDesc = () => {
var sortByPlatform = listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setListGames(sortByPlatform.reverse());
}

Answer 3

坦率地说，这并没有太大的不同。
这种情况下的差异主要有:

• this不再相关
• 函数需要像普通函数或const一样声明。
• state不再是一个对象，虽然它可以是如果你想，但也可以是独立的状态块，由内置的useState钩子声明。

你发布的代码应该是这样的:

import { useState } from 'react';
function MyComponent() {
const [listGames, setListGames] = useState([]);
const onSortByPlatformAsc = () => {
var sortByPlatform = state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setListGames(sortByPlatform);
};
const onSortByPlatformDesc = () => {
var sortByPlatform = state.listGames.sort((a, b) =>
a.platform.localeCompare(b.platform)
);
setListGames(sortByPlatform.reverse());
};
}

如果还有问题，请尽管问。

Answer 4

Array.prototype.sort和Array.prototype.reverse都进行就地排序和排序。换句话说,他们变异数组操作结束。如果你在React状态下调用它，它会改变状态，这是React中的一个主要反模式。

假设您已经将类组件this.state.listGames转换并存储为函数组件listGamesuseStateReact hook:

const [listGames, setListGames] = React.useState([]);

我建议将代码分解一点来创建排序和逆排序比较器函数:

const sortComparator = (a, b) => a.platform.localeCompare(b.platform);
const inverseSortComparator = (a, b) => sortComparator(b, a);

使用功能状态更新访问前一个状态，创建一个副本，然后使用比较器对其排序。

const onSortByPlatformAsc = () => {
setListGames(listGames => listGames.slice().sort(sortComparator));
};

要执行反向排序，再次使用函数状态更新，创建副本，然后使用反向排序比较器函数交换排序顺序。

const onSortByPlatformDesc = () => {
setListGames(listGames => listGames.slice().sort(inverseSortComparator));
};