在ReactJs中对数据排序

Asking 发表于 Dev

询问

我有下一个代码：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState([
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic" },
    { name: "Zeros", value: 37 }
  ]);

  const sorting = () => {
    const a = state.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });
    setState(a);
  };

  return (
    <div className="App">
      <table>
        <tr>
          <th>Firstname</th>
          <th>data</th>
        </tr>
        {state.map((i) => {
          return (
            <tr key={i.name}>
              <td>{i.name}</td>
              <td>{i.value}</td>
            </tr>
          );
        })}
      </table>
      <button onClick={sorting}>sort</button>
    </div>
  );
}

单击我要触发下一个功能的按钮：

 const sorting = () => {
    const a = state.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });
    setState(a);
  };

哪个应该对表中的数据进行排序，但是不会发生。
问题：为什么我的功能不起作用？ow解决我上面描述的问题？注意：当我单击按钮时，表中的数据应更改顺序。

凯坦·拉姆特克

在排序之前，将名称转换为大写或小写。之后，您可以借助轻松地对它进行排序localeCompare()：

let data = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic" },
  { name: "Zeros", value: 37 },
];

data.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));

console.log(data);

完全反应的应用程序：

再者，您还需要调用该sorting()函数，可以使用useEffect钩子进行此操作。

import React, { useState, useEffect } from "react";

export default function App() {
  const [state, setState] = useState([
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic" },
    { name: "Zeros", value: 37 }
  ]);

  const sorting = () => {
    const data = [...state];
    data.sort((a, b) =>
      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
    );
    console.log(data);
    setState(data);
  };

  useEffect(() => {
    sorting();
  }, []);

  return (
    <div className="App">
      <table>
        <tr>
          <th>Firstname</th>
          <th>data</th>
        </tr>
        {state.map(i => {
          return (
            <tr key={i.name}>
              <td>{i.name}</td>
              <td>{i.value}</td>
            </tr>
          );
        })}
      </table>
      <button onClick={sorting}>sort</button>
    </div>
  );
}

您可以在此处使用工作示例：Stackblitz链接

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。