排序Html表格列reactjs

Question

我正在尝试按 ASC 和 desc 顺序对 html 表进行排序，但是当我输入 id name 时，该表无法正常工作，它仅适用于第一列.这是我目前尝试的代码，但它不起作用谢谢

从“反应”导入反应；

class Th extends React.Component {
  handleClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  };
  render() {
    const { value } = this.props;
    return <th onClick={this.handleClick}>{value}</th>;
  }
}

class App extends React.Component {
  state = {
    users: []
  };

  async componentDidMount() {
    const res = await fetch(
      `https://run.mocky.io/v3/6982a190-6166-402e-905f-139aef40e6ef`
    );
    const users = await res.json();
    this.setState({
      users
    });

  }

  handleSort = id => {
    this.setState(prev => {
      return {
        [id]: !prev[id],
        users: prev.users.sort((a, b) =>
          prev[id] ? a[id] < b[id] : a[id] > b[id]
        )
      };
    });
  };
  render() {
    const { users } = this.state;
    return (
      <table>
        <thead>
          <tr>
            <Th onClick={this.handleSort} id="mileage" value="Mileage" />
            <Th onClick={this.handleSort} id="overall_score" value="Overall score" />
            <Th onClick={this.handleSort} id="fuel_consumed" value="Fuel Consumed" />
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr>
              <td>{user.span.mileage.value}</td>
              <td>{user.span.overall_score.value}</td>
              <td>{user.span.fuel_consumed.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}
export default App;

Answer 1

要使其正常工作，您需要更改一些内容：

• setState 将新数据与旧数据合并，因此[id]: !prev[id] 为您过滤的每一列添加新属性，而不删除旧数据。最好将要过滤的列存储在专用状态属性中（例如sortBy）。
• 修复排序功能，使其按正确的对象属性对用户进行排序
• 从componentDidMount 中删除async 并更改fetch 以使用then/catch 而不是async/await（它使您的代码更React-ish）。

使用以下示例作为灵感：

class App extends React.Component {
  state = {
    sortBy: null,
    order: "ASC",
    users: []
  };

  componentDidMount() {
    fetch(`https://run.mocky.io/v3/6982a190-6166-402e-905f-139aef40e6ef`)
      .then(response => response.json())
      .then(users => this.setState({users}))
      .catch(err => console.log('Error', err));
  }

  handleSort = id => {
    this.setState(prev => {
      const ordered = prev.users.sort((a, b) =>
        prev.order === "ASC"
          ? a["span"][id]["value"] < b["span"][id]["value"]
          : a["span"][id]["value"] > b["span"][id]["value"]
      );

      return {
        sortBy: id,
        order: prev.order === "ASC" ? "DESC" : "ASC",
        users: ordered
      };
    });
  };
  render() {
    const { users } = this.state;
    return (
      <table>
        <thead>
          <tr>
            <Th onClick={this.handleSort} id="mileage" value="Mileage" />
            <Th
              onClick={this.handleSort}
              id="overall_score"
              value="Overall score"
            />
            <Th
              onClick={this.handleSort}
              id="fuel_consumed"
              value="Fuel Consumed"
            />
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr>
              <td>{user.span.mileage.value}</td>
              <td>{user.span.overall_score.value}</td>
              <td>{user.span.fuel_consumed.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

class Th extends React.Component {
  handleClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  };
  render() {
    const { value } = this.props;
    return <th onClick={this.handleClick}>{value}</th>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

请记住，in 仅适用于您已有的当前数据架构和字段。如果要更改要排序的字段，则需要更新排序功能。