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

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()按字母顺序排序。

在减速器中完成排序，而组件仅调度“排序”操作。每次重新排序都会导致jobList prop(in 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 继续。:)