自定义排序，未显示更新数据的组件做出反应

Question

我在custom table 中添加了sort。如果我在console 中看到它，排序正在工作，它表明数据正在更新。 但是我的TableBody 一次后没有更新。

不知道发生了什么。

TableWrapper.js

const TableWrapper = ({...props}) => {
  const { tableData, columns } = props;
  const [ visibleData, setVisibleData ] = useState([])
  const sortColumn = (dataIndex, sortOrder) => {
    let sortedData = tableData.data.firstResponse.sort(function(a, b){
      if(a.dataIndex < b.dataIndex) return -1;  // Ascending Order
      if(a.dataIndex > b.dataIndex) return 1;   // Descending Order  
      return 0; // Default
  })
  if (sortOrder === 'desc') {
    sortedData.reverse();
  }    
      console.log(dataIndex, sortOrder)
      console.log(sortedData)
      setVisibleData(sortedData);
  }
    
  return (
    <>
    <table>
      <TableHead headers={columns} isCheckBox={true} isSelectAll={selectAll} selectAllChecked={selectAllChecked} sortColumn={sortColumn} />
      <TableBody rows={tableData} tableData={visibleData} headers={columns} isCheckBox={true} isSelectAll={selectAll} isCheckBoxChecked={selectedCheckBox} />
    </table>
    </>
  );
};

export default TableWrapper;

TableHead.js

const TableHead = ({...props}) => {
  const { headers, isCheckBox, isSelectAll, selectAllChecked, sortColumn } = props;
  const [sortorState, setSortorState] = useState("desc");

  const checkRef = useRef();

  const getSortorState = sortorState => {
    switch (sortorState) {
      case "asc":
        return "desc";
      case "desc":
        return "asc";
      default:
        return "desc";
    }
  };

  const handleSorterChange = (dataIndex, sortOrder) => {
    const updatedSortorState = getSortorState(sortOrder);
    setSortorState(updatedSortorState);
    sortColumn(dataIndex, updatedSortorState)
  };

  return (
    <thead>
        <tr>
          {
            isCheckBox && 
              <th key={`table-header-checkBox`}><input id="select-all-checkBox" type="checkbox" onClick={selectAllChecked} ref={checkRef} /></th>
          }
        {headers.map(item => {
          const { key, field, style, header, sortable} = item
          return (
            <>
            {sortable ? 
              <th
                className={"table-header" + " sortable"}
                onClick={() =>
                  handleSorterChange(field, sortorState)
                }
              >
              <span>{header}</span>
              </th>
            : 
            <th
              key={`table-header-${key}`}
              style={style}>
              {header}
            </th>
            }
            </>
          )})}
        </tr>
    </thead>
  );
};

export default TableHead;

我需要一些帮助，为什么它没有得到更新。

Or is there any better way to achieve the sorting?

在图片中，我正在尝试对first name 进行排序，如果您看到控制台数据正在排序，但有一次之后table data 没有得到更新

Answer 1

您似乎正在改变props.tableData.data.firstResponse 数组，首先是在对其调用.sort 时，然后再有条件地对其进行反转。这些都是就地算法，这意味着它们会更新它们运行的​​数组。

Array.prototype.sort

sort() 方法就地对数组的元素进行排序并返回 排序后的数组。

Array.prototype.reverse

reverse() 方法将数组反转就地。第一个数组 元素成为最后一个，最后一个数组元素成为 首先。

您将需要首先创建props.tableData.data.firstResponse 数组的浅表副本以进行排序和有条件地反转。似乎dataIndex 实际上是您要排序的字段属性，因此它很可能真的被用作computed property name（没有dataIndex 属性，所以您正在比较未定义的值)。

const TableWrapper = ({ tableData, columns }) => {
  const [ visibleData, setVisibleData ] = useState([]);

  const sortColumn = (field, sortOrder) => {
    const sortedData = tableData.data.firstResponse
      .slice()                             // <-- create shallow copy of array
      .sort(function(a, b) {
        if(a[field] < b[field]) return -1; // <-_ use computed property
        if(a[field] > b[field]) return 1;  // <-_ use computed property
        return 0;
      });

    if (sortOrder === 'desc') {
      sortedData.reverse();
    } 
    setVisibleData(sortedData);
  }
    
  return (
    <table>
      <TableHead
        headers={columns}
        isCheckBox={true}
        isSelectAll={selectAll}
        selectAllChecked={selectAllChecked}
        sortColumn={sortColumn}
      />
      <TableBody
        rows={tableData}
        tableData={visibleData}
        headers={columns}
        isCheckBox={true}
        isSelectAll={selectAll}
        isCheckBoxChecked={selectedCheckBox}
      />
    </table>
  );
};

一个更简单的排序切换功能（它只能是一个或另一个，对吧？）：

const getSortorState = sortorState => sortorState === 'asc' ? 'desc' : 'asc';