数据不会对表进行排序(Reactjs)

Question

我编写了一个web应用程序，它生成随机玩家并将其发送到另一个组件，该组件将数据呈现到一个表中。我用Redux做了这一切。

现在，正如您从下面的代码中看到的，呈现到表中的数据取自sortedUsers数组，该数组本身从全局状态中获取其"数据"。

我还在SortButton组件中编写了一个函数sortArray()，它根据您希望的排序顺序(升序或降序(按时间对给定的数组进行排序。下拉菜单中的Ascending和Descending按钮似乎工作得很好，因为它们正在对sortedUsers数组进行排序(顺便说一句，我知道这一点，因为我在单击按钮前后将数组记录到控制台，它确实工作了(，但由于某种原因，表不会重新呈现数据。因此，数组确实进行了排序，但表什么也没发生。

以下是呈现表格的组件：

import React from "react";
import { useSelector } from "react-redux/"; //used for accessing values of the state
import { Container, Table, Button } from "react-bootstrap";
import { CSVLink } from "react-csv";
import SortButton from "./components/sortButton";
import userEvent from "@testing-library/user-event";
function Players() {
const user = useSelector((state) => state.user.value.players);
let sortedUsers = [...user]
const debug = () => {console.log(sortedUsers)}
const exportHeaders = [
{ label: "ID", key: "id" },
{ label: "Name", key: "fullName" },
{ label: "Email", key: "email" },
{ label: "Gender", key: "gender" },
{ label: "Phone number", key: "phone" },
{ label: "Cell", key: "cell" },
{ label: "Location", key: "location" },
{ label: "Nationality", key: "nat" },
{ label: "Gender", key: "gender" },
{ label: "Age", key: "age" },
{ label: "Times played", key: "timesPlayed" },
{ label: "Time", key: "time" },
];
return (
<Container>
<h1 className="mt-3">Players</h1>
<SortButton users={sortedUsers} />
<Button onClick={debug}>
debug
</Button>
<hr></hr>
<Table hover>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Location</th>
<th>Nationality</th>
<th>Email</th>
<th>Phone</th>
<th>Cell</th>
<th>Time played</th>
<th></th>
</tr>
</thead>
<tbody>
{sortedUsers.map((player) => {
if (player.isWinner) {
return (
<tr className="table-success">
<td>{player.fullName}</td>
<td>{player.gender}</td>
<td>{player.location}</td>
<td>{player.nat}</td>
<td>{player.email}</td>
<td>{player.phone}</td>
<td>{player.cell}</td>
<td>{ player.time }</td>
<td>{player.isWinner && "Winner"}</td>
</tr>
);
} else {
return (
<tr>
<td>{player.fullName}</td>
<td>{player.gender}</td>
<td>{player.location}</td>
<td>{player.nat}</td>
<td>{player.email}</td>
<td>{player.phone}</td>
<td>{player.cell}</td>
<td>{player.time}</td>
<td></td>
</tr>
);
}
})}
</tbody>
</Table>
<CSVLink
data={user}
headers={exportHeaders}
className="btn btn-primary m-3 mt-1"
>
Export to CSV
</CSVLink>
</Container>
);
}
export default Players;

这是排序按钮：

import React from "react";
import { Dropdown } from "react-bootstrap";
function SortButton(props) {
const sortArray = (array, order) => {
if (order == "Ascending") {
return array.sort((a, b) => {
return (a.time < b.time) ? -1 : ((a.time > b.time) ? 1 : 0)
})
}
return array.sort((a, b) => {
return (a.time < b.time) ? 1 : ((a.time > b.time) ? -1 : 0)
})
}
return (
<Dropdown className="mt-3">
<Dropdown.Toggle variant="success" id="dropdown-basic">
Sort
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => {sortArray(props.users, "Ascending")}}>Ascending</Dropdown.Item>
<Dropdown.Item onClick={() => {sortArray(props.users, "Descending")}}>Descending</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default SortButton;

Answer 1

我认为您的问题是更改顺序sortedUsers不会更新状态或redux存储，因此组件不会重新渲染。您需要让sortArray更新redux存储中阵列的顺序，或者将sortArray移动到Players并执行以下操作：

function Players() {
const user = useSelector((state) => state.user.value.players);
const [sort, setSort] = useState('ascending')
const sortArray = (a,b) => {
if(sort==='ascending'){
return a.time-b.time
}
return b.time-a.time
}

然后在您的退货声明中

{sortedUsers.sort((a,b)=>sortArray(a,b)).map((player) => {

并将CCD_ 8更改为仅更新CCD_ 9 的状态