如何在表格中按升序和降序对数据进行排序

Question

我是反应 js 的新手。在这里，我尝试在用户单击图标时对数据进行排序。

<th scope="col">Technology <i className="fa fa-fw fa-sort sort-icon"></i></th>

所以，现在我有了对象数组形式的数据。

在此，我有 5 列，每列都有排序图标。那么，我该如何使用 react 来实现这个东西呢？

我想按字母顺序排序。

我的数据看起来像，

[{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null,
        "jdName": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": java,
    }, {
        "id": "5b7fb04d6c5fd004efdb826f",
        "hrmsJdId": null,
        "companyId": null,
        "jdName": "Content Innovation Lead",
        "jobDescription": null,
        "technology": css
    }, {
        "id": "5b7fb0b26c5fd004efdb8271",
        "hrmsJdId": null,
        "companyId": null,
        "jdName": "Urgent Opening for DSP Engineer/ Senior Engineer for",
        "jobDescription": null,
        "technology": react,
    }]

 <td>{item.technology}</td>
                <td>17</td>
                <td title={item.jdName} className="jd-name-container justify-content-center align-items-center">
                  <div className="jdName">{item.jdName}</div>
                  {(key + 1 === 1) && <div className="badge new-badge badge-warning-custom">New</div>}
                </td>

这就是我呈现数据的方式。现在，

默认情况下，我使用

对其进行排序

   <tbody className="text-center">
          {props.jobList && props.jobList && props.jobList.length > 0 && props.jobList.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {
            return (
              <tr key={key}>
                <td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" /></td>
                <td>{item.technology}</td>
                <td>17</td>
                <td title={item.jdName} className="jd-name-container justify-content-center align-items-center">
                  <div className="jdName">{item.jdName}</div>
                  {(key + 1 === 1) && <div className="badge new-badge badge-warning-custom">New</div>}
                </td>
                <td>30</td>
                <td>30</td>
                <td>
 </tbody>

那么，我该如何实现呢？

我所做的是，

<th scope="col">Technology<i className="fa fa-fw fa-sort sort-icon" onClick={props.sortAscending('Technology')}></i></th>

然后在容器中

    sortData = (key,event) => {
        console.log("key is,", key);
        this.props.sortAscending(key);
      }

<UserJobsTabel jobList={filteredList} sortAscending={this.sortData} />

作为道具传递。

现在正在行动，

export const sortAscending = (type) => {
  return {
    type: "SORT_ASCENDING",
    payload: type
  }
}

在减速器中，

case FETCHING_JOBDESCRIPTION_SUCCESS:
            return {
                ...state,
                jobList: action.data.jobData ? action.data.jobData.sort((a, b) => b.createdAt - a.createdAt) : action.data.jobData,
                yesterDayScore: action.data.yesterdayScore,
                todayScore: action.data.todayScore,
                error: false,
            }

 case "SORT_ASCENDING": 
          const { sortKey } = action.payload;
            const jobList = [ ...state.jobList ]
        .sort((a, b) => a[sortKey].localeCompare(b[sortKey]));
      return { ...state, jobList };

×

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我收到此错误。

Answer 1

使用localeCompare() 按字母顺序排序。

在组件仅调度“排序”操作时在 reducer 中完成排序。每次重新排序都会导致 jobList 的组件重新渲染 prop（在 mapStateToProps 中）更新。

在减速器中：

const initialState = {
  jobList: [],
};

export const jobList = (state = initialState, action) => {
  switch(action.type) {
    case Action.SORT_ALPHA_ASC:
      const { sortKey } = action.payload;
      const jobList = [ ...state.jobList ]
        .sort((a, b) => a[sortKey].localeCompare(b[sortKey]));

      return { ...state, jobList };

    default:
      return state;
  }
}

在您的组件中：

// alphaSort will dispatch action: SORT_ALPHA_ASC
const { jobList, alphaSort } = this.props;
if (! jobList || jobList.length < 1) {
  // no job list
  return null;
}

return (
<table>
  <thead>
    { /* TODO: use th/td */ }
    <SomeIcon name='asc-technology' onClick={() => alphaSort('technology')} />
    <SomeIcon name='asc-jdname' onClick={() => alphaSort('jdName')} />
    { /* TODO: other fields */ }
  </thead>
  <tbody>
  {
    jobList.map((job) => ({
      <tr key={job.id}>
        <td name="technology">{job.technology}</td>
        <td title={job.jdName}>
          <div className="jdName">{job.jdName}</div>
        </td>
        { /* TODO: other fields */ }
      </tr>
    }))
  }
  </tbody>
</table>
);

注意： 降序 alpha 排序和其他字段将让 OP 继续。 :)

Answer 2

React Js 数组有排序功能：

['b', 'a'].sort((e1, e2) => e1.id < e2.id  ? 1 : - 1)

如果 lambda 函数返回 0，它什么也不做。否则，数组中的两个元素将按返回值的符号排序。

如果数据库中有重复的 ID，则该函数将返回 0。

要交换顺序，请将返回值的符号或“小于”运算符更改为大于运算符。