React：table 的排序不是通过 useEffect 或 eventHandler 呈现的？

Question

我正在构建一个 table (here it is);它将有一个子组件，其工作是渲染从 props 获取的数据行；到目前为止的问题是：

useEffect 不会触发其中的函数，该函数显示是由其默认模式的更改触发的，即 firstName 或 useState 值中的 lastName。

这是我的代码：

function TableHeaders({ headerData, handleDataSort }) {
  function convertCamelToTitleCase(text) {
    const result = text.replace(/([A-Z])/g, " ");
    return result.charAt(0).toUpperCase() + result.slice(1);
  }
  
  return (
   <>
    <thead>
      <th>
        <button onClick={()=> handleDataSort('firstName')}>first - default</button>
        <button onClick={()=> handleDataSort('lastName')}>last</button>
      </th>
      {headerData.map((headerName, index) => {
        return (
        <>
          <th key={index} scope="col">
            {convertCamelToTitleCase(headerName)}
          </th>
        </>
        );
      })}
    </thead>
   </>
  );
}

function TableData({rowData}) {
  return (
    <tbody>
      {rowData.map(({
       company, 
       dateJoined, 
       firstName, 
       id, 
       isSiteAdmin,
       jobTitle,
       lastName,
       state
      }) => {
        return (
       
         <tr key={id}>
           <td></td>
           <td>{id}</td>
           <td>{firstName}</td>
           <td>{lastName}</td>
           <td>{company}</td>
           <td>{jobTitle}</td>
           <td>{state}</td>
           <td>{isSiteAdmin}</td>
           <td>{dateJoined}</td> 
         </tr>
         
        )
      })}
    </tbody>
    )
}

const MemoTableData = React.memo(TableData)

const App = () => {
const [headerData, setHeaderData] = React.useState(() => Object.keys(window.userData[0]));
const [rowData, setRowData] = React.useState([]);
const [sortType, setSortType] = React.useState('firstName')
  
  React.useEffect(() => {
    const sortArray = property => {
      const sorted = [...window.userData].sort((a, b) => {
        return b[property] - a[property]});
      setRowData(sorted);
    };

    sortArray(sortType);
  }, [sortType]);
  
  return (
    <table>
      <caption>Zerocater Frontend Take Home Exam</caption>
      <TableHeaders headerData={headerData} handleDataSort={setSortType} />
      <MemoTableData rowData={rowData} />
    </table>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

useEffect 本身被正确触发，因此 sortType 在按钮点击时发生相应变化。

table根本没有更新的原因是你的排序函数

(a, b) => {
  return b[property] - a[property]
}

returns NaN 因为 a[property] 和 b[property] 是字符串。

你需要的是一个正确的排序函数(reference):

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

React：table 的排序不是通过 useEffect 或 eventHandler 呈现的？

React: Sorting of table not rendering via useEffect or eventHandler?

javascript

event-handling

reactjs

use-effect

use-state