React：表头排序箭头随排序状态切换的实现问题

1. 给表格组件传递排序状态 #

在页面组件中，把当前的sortDetails（包含排序列和排序方向）作为props传给表格组件：

// 页面组件中渲染表格的位置
<TableComponent 
  sortDetails={sortDetails} 
  handleSorting={handleSorting} 
  // 传入其他必要props：InboxColumns、checkAll、selectAll等
/>

2. 表格组件中实现箭头条件渲染 #

在表格组件内通过props接收sortDetails，然后在表头渲染时，根据当前列是否为排序列、排序方向来显示对应箭头：

// 表格组件代码修改
<Table bordered hover data-testid="task-table">
  <thead>
    <tr>
      <th>
        <Form.Group>
          <Form.Check id="selectAll" value={checkAll} onChange={selectAll}></Form.Check>
        </Form.Group>
      </th>
      {InboxColumns.map((colName, index) => (
        <th key={index} onClick={() => handleSorting(colName)}>
          {colName}
          {/* 根据排序状态显示对应箭头 */}
          {sortDetails.column === colName && sortDetails.order === SortOrder.ASC && <UpArrow />}
          {sortDetails.column === colName && sortDetails.order === SortOrder.DESC && <DownArrow />}
        </th>
      ))}
    </tr>
  </thead>
  <tbody>
  </tbody>
</Table>

同时给表格组件定义props类型（TS环境下）：

interface TableComponentProps {
  sortDetails: { column: string; order: SortOrder };
  handleSorting: (colName: string) => void;
  InboxColumns: string[];
  checkAll: boolean;
  selectAll: () => void;
}

const TableComponent = (props: TableComponentProps) => {
  const { sortDetails, handleSorting, InboxColumns, checkAll, selectAll } = props;
  // 组件其他逻辑
}

3. 修正页面中状态更新的问题 #

你当前直接修改sortDetails原对象的方式，会导致React无法检测到状态变化，进而不触发组件重新渲染。需要改为创建新对象来更新状态：

function handleSorting(sortColumn: string): void {
  // 克隆sortDetails对象，避免直接修改原状态
  let newSortDetails = { ...sortDetails };

  // 更新排序方向逻辑
  if (newSortDetails.column === sortColumn && newSortDetails.order === SortOrder.ASC) {
    newSortDetails.order = SortOrder.DESC;
  } else if (newSortDetails.column === sortColumn && newSortDetails.order === SortOrder.DESC) {
    newSortDetails.order = SortOrder.ASC;
  } else {
    newSortDetails.column = sortColumn;
    newSortDetails.order = SortOrder.ASC;
  }

  // 克隆并更新eventLogRequest对象
  const newEventLogRequest = {
    ...eventLogRequest,
    sortDetails: newSortDetails,
    page: 1
  };

  setPage(1);
  setEventLogRequest(newEventLogRequest);
  dispatch(actions.getInboxes(newEventLogRequest));
}

修改后，排序状态变化时页面组件会正确更新，表格组件通过props拿到最新状态后，就能自动切换显示对应的箭头了。

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