Javascript 在React JS中按从API获取的姓氏数据排序

我正在尝试从随机用户API获取数据，并创建一个用户表。我还想添加一些功能，如按姓氏排序、分页，以便每页仅显示10个项目，如果用户希望看到超过10个项目，则添加一个选项按钮。页面上的10个项目，我正在绞尽脑汁构建该功能，任何hellp都将受到赞赏

import React, { Component } from 'react';

import Loader from '../components/Loader/Loader';

import '../util/Fetch.css';
export class Fetch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      isLoading: true
    };
    this.sortList.bind(this);
    this.compareBy.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    const url =
      'https://randomuser.me/api/?results=20&nat=us,nz,au&seed=foobar';
    fetch(url)
      .then(response => {
        return response.json();
      })
      .then(parsedJSON => {
        this.setState({
          users: parsedJSON.results,
         isLoading: false
        });
      })
        .catch(error => console.log('parsing failed', error));
    }

    compareBy(key) {
      return function(a, b) {
        if (a[key] < b[key]) return -1;
        if (a[key] > b[key]) return 1;
        return 0;
      };
    }

    sortList(key) {
    let arrayCopy = [...this.state.users];
    console.log(
      arrayCopy.map(user => {
        return user.name.first;
      })
    );
    arrayCopy
      .map(user => {
        return user.name.last;
      })
      .sort(this.compareBy(key));
    this.setState({ users: arrayCopy });
  }
}
render() {
const { users } = this.state;

return (
  <div>
    {this.state.isLoading ? (
      <Loader />
    ) : (
      <div className="table-container">
        <div className="pag-header">
          <div>
            <ul className="pag-box">
              <h2>List of Users</h2>
              <li>
                <hr />
              </li>
              <li>
                Sort By:{' '}
                <a onClick={() => this.sortList(this.compareBy, 'last')}>
                  Last Name
                  <span>
                    <i className="fas fa-sort-down" />
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <div>
            <ul className="pag-box">
              <li>
                items per page
                <label>
                  <select>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="75">75</option>
                    <option value="100">100</option>
                  </select>
                </label>
              </li>
              <li>of</li>
              <li>
                <a>
                  <i className="fas fa-angle-left" />
                </a>
              </li>
              <li>
                <a>
                  <i className="fas fa-angle-right" />
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="responsive-table">
          <li id="table-head" className="table-header">
            <div className="col col-1">First name</div>
            <div className="col col-2">Last Name</div>
            <div className="col col-3">Country</div>
            <div className="col col-4">Address</div>
            <div className="col col-5">City</div>
            <div className="col col-5">State</div>
            <div className="col col-7">Zip</div>
            <div className="col col-8">Phone</div>
          </li>
          <ul className="responsive-table">
            {users.map(user => (
              <li key={user.id.value} className="table-row">
                <div className="col col-1" data-label="First Name">
                  {user.name.first}
                </div>
                <div className="col col-2" data-label="Last Name">
                  {user.name.last}
                </div>
                <div className="col col-3" data-label="Country">
                  {user.nat}
                </div>
                <div className="col col-4" data-label="Address">
                  {user.location.street}
                </div>
                <div className="col col-5" data-label="Address">
                  {user.location.city}
                </div>
                <div className="col col-6" data-label="State">
                  {user.location.state}
                </div>
                <div className="col col-7" data-label="Zip">
                  {user.location.postcode}
                </div>

                <div className="col col-8" data-label="Phone">
                  {user.cell}
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    )}
   </div>
 );
 }
}

---

编辑：问题代码存在许多问题，问题中没有提供足够的信息来真正理解问题的范围。在项目中跨多个文件制定了一个自定义解决方案，以解决询问者的问题，但在此处发布该解决方案超出了此问题的范围

在最后几行中，您尝试对arrayCopy.mapuser=>user.name.last进行排序，该映射将返回一个仅包含姓氏的数组，如['jones'、'smith'、'jenkins']。然后尝试按键对该数组进行排序，但该数组是一个普通的字符串数组，它唯一的键是索引0、1、2等

相反，您应该执行arrayCopy.sorttthis.compareBykey和this.sortList'last'来完成排序并保存到状态

compareBy=key=>{//无需绑定箭头函数 返回函数A，b{ 如果a[key]b[key]返回1； 返回0； }; }; sortList=key=>{ 让arrayCopy=[…this.state.users]； arrayCopy.sorttthis.compareBykey； this.setState{users:arrayCopy}； }; 编辑：在进一步查看代码之后，我看到您正在尝试绑定sortList和compareBy，但实际上并没有将这些绑定的方法保存到任何地方。this.sortList.bindthis返回一个绑定方法，但不会绑定原始方法，因此无论何时调用this.sortList，它仍然是未绑定的。如上所述将其更改为箭头函数将使其始终处于绑定状态

编辑：现在您已经添加了render方法，我们可以看到真正的问题在单击处理程序中：

this.sortListthis.compareBy'last'}> 在这里，您使用两个参数调用this.sortList，一个函数this.compareBy和一个字符串“last”。this.sortList只需要一个参数：字符串。这一行应改为：

this.sortList'last'}>

---

此外，由于您在onClick处理程序中将this.sortList作为箭头函数实现，因此您不需要绑定sortList方法，也不需要像示例中那样在构造函数中绑定它（该构造函数将无法实现），也不需要像我在上一次编辑中建议的那样将其转换为箭头函数。真正的问题是A单击处理程序传递了错误的参数，B在对数组进行排序之前将数组映射到字符串数组。

您可以使用一种简单的方法对数组进行排序；差不多

sortList = (key)=>{
 let arrayCopy = [...this.state.users];
 arrayCopy.sort((a,b) => a.name[key] > b.name[key]);
 this.setState({ users: arrayCopy });
}

---

我尝试了这个``compareBykey{return function，b{if a[key]b[key]return 1；return 0；}；}sortListkey{let arrayCopy=[…this.state.users]；arrayCopy.sorttthis.compareBykey；this.setState{users:arrayCopy}；}`更新了我的答案，提供了有关需要正确绑定sortList和compareBy方法的信息。您还可以添加如何使用sortList吗？你的例子没有显示点击绑定或任何东西。等一下，我也会添加它！您的实际问题是单击处理程序。this.sortListthis.compareBy'last'}>应该是this.sortList'last'}>。这是因为这个，巫师名单。。。只接受一个参数键，它是一个字符串，您要传入两个参数：this.compareBy，它是一个函数，然后“last”应该是第一个也是唯一一个参数的字符串。请记住，排序函数使用Unicode点对每个字符进行排序。因此，在大多数情况下，最终结果并不是你所期望的。参考MDN。您可以使用lodash，或者使用他们在文档上的示例，以确保排序是稳定的。