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

Question

Image of table

我正在尝试从随机用户 API 获取数据并创建用户表。我还想添加按姓氏排序、分页以每页仅显示 10 个项目等功能，如果用户想查看更多项目，则添加一个选项按钮。页面上有 10 个项目，我正在努力构建该功能，任何人都将不胜感激

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>
 );
 }
}

Answer 1

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

<小时/>

在最后几行中，您尝试对 arrayCopy.map(user => user.name.last) 进行排序 该映射将返回一个仅包含姓氏的数组，就像 ['琼斯'，'史密斯'，' Jenkins ']。然后，您尝试按键对该数组进行排序，但该数组是一个普通的旧字符串数组，它唯一的“键”是索引(0、1、2 等)

相反，您应该执行 arrayCopy.sort(this.compareBy(key)) 和 this.sortList('last') 来完成排序并保存到状态。

compareBy = (key) => {  // no need to bind arrow functions
  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];
  arrayCopy.sort(this.compareBy(key));
  this.setState({ users: arrayCopy });
};

编辑:在进一步查看您的代码后，我发现您正在尝试绑定(bind) sortList 和 compareBy，但您实际上并未将这些绑定(bind)方法保存在任何地方。 this.sortList.bind(this) 返回一个绑定(bind)方法，但不会使原始方法绑定(bind)，因此每当您调用 this.sortList 时，它仍然是未绑定(bind)的。将其更改为箭头函数(如上)将使其始终绑定(bind)。

编辑:现在您已经添加了渲染方法，我们可以看到真正的问题出在您的点击处理程序中:

 <a onClick={() => this.sortList(this.compareBy, 'last')}>

在这里，您使用两个参数调用 this.sortList:一个函数 (this.compareBy) 和一个字符串 ('last')。 this.sortList 仅需要一个参数:字符串。此行应为:

 <a onClick={() => this.sortList('last')}>

此外，由于您在该 onClick 处理程序中将 this.sortList 实现为箭头函数，因此不需要绑定(bind) sortList > 方法，或者在您的示例中的构造函数中(这不会按实现方式工作)，或者将其转换为箭头函数(正如我在之前的编辑中建议的那样)。真正的问题是 A) 点击处理程序传递了错误的参数，B) 在排序之前将数组映射到字符串数组。