React项目中表格数据排序后无法重新渲染问题求助

我用Redux开发了一个Web应用，可生成随机玩家数据并传递至另一个组件渲染为表格。表格渲染的数据取自sortedUsers数组，该数组的数据来源于全局状态。

在SortButton组件中编写了sortArray()函数，可按指定顺序（升序/降序）对数组按time字段排序。下拉菜单中的升序、降序按钮可成功排序sortedUsers数组（通过控制台日志可确认排序生效），但表格始终未重新渲染排序后的数据。

相关代码 #

Players组件（表格渲染） #

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;

SortButton组件（排序控制） #

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;

问题根源 #

1. 局部变量无法触发重渲染：sortedUsers是组件内部的普通局部变量，React不会监听这类变量的变化。即使子组件修改了数组内容，父组件Players无法感知到变化，因此不会重新渲染表格。
2. 数组修改方式不符合React更新机制：sort()方法会直接修改原数组，这种原地修改不会触发React的更新检测，因为组件的状态或props没有发生可被检测的变更。

解决方案：用组件内部状态管理排序结果 #

修改代码，将排序后的数组作为组件内部状态，通过回调函数触发状态更新，从而驱动表格重渲染。

1. 修改Players组件 #

import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux/";
import { Container, Table, Button } from "react-bootstrap";
import { CSVLink } from "react-csv";
import SortButton from "./components/sortButton";

function Players() {
  const user = useSelector((state) => state.user.value.players);
  // 将sortedUsers改为组件内部状态
  const [sortedUsers, setSortedUsers] = useState([...user]);

  // 全局玩家数据更新时，同步重置排序后的数组
  useEffect(() => {
    setSortedUsers([...user]);
  }, [user]);

  const debug = () => {console.log(sortedUsers)}

  // 定义排序逻辑，通过setSortedUsers触发重渲染
  const handleSort = (order) => {
    const sorted = [...sortedUsers].sort((a, b) => {
      return order === "Ascending" ? a.time - b.time : b.time - a.time;
    });
    setSortedUsers(sorted);
  };

  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 */}
      <SortButton onSort={handleSort} />
      <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;

2. 修改SortButton组件 #

import React from "react";
import { Dropdown } from "react-bootstrap";

function SortButton(props) {
  return (
    <Dropdown className="mt-3">
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        Sort
      </Dropdown.Toggle>

      <Dropdown.Menu>
        {/* 触发父组件传递的排序回调 */}
        <Dropdown.Item onClick={() => props.onSort("Ascending")}>Ascending</Dropdown.Item>
        <Dropdown.Item onClick={() => props.onSort("Descending")}>Descending</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

export default SortButton;

方案说明 #

• 将sortedUsers改为useState状态，调用setSortedUsers时React会自动检测状态变化并重新渲染表格。
• 通过useEffect监听全局Redux状态user的变化，确保原始玩家数据更新时，排序后的数组也同步更新。
• 排序逻辑移至父组件，子组件仅负责触发排序事件，符合React单向数据流原则。
• 使用[...sortedUsers].sort(...)创建数组副本后再排序，避免直接修改原状态数组，保证状态更新的不可变性。

如果需要在多个组件中同步排序状态，可以将排序逻辑集成到Redux中，通过action更新全局状态中的玩家数组，所有依赖该状态的组件都会自动重新渲染。

内容的提问来源于stack exchange，提问作者downmath