时间戳

首页 > 解决方案 > useEffect 中的排序方法不会更新我状态下的数组

reactjs - useEffect 中的排序方法不会更新我状态下的数组

问题描述

我正在尝试实现一个 Sort 组件，该组件按名称或 ID 对我的项目进行排序。

这是我的代码：

const data = [
  {
    id: 1,
    name: "Gianni",
  },
  {
    id: 2,
    name: "Alvaro",
  },
  {
    id: 3,
    name: "Zuzzurello",
  },
  {
    id: 4,
    name: "Stefanino",
  },
  {
    id: 5,
    name: "Bertone",
  },
];

function App() {
  const [items, setItems] = useState(data);
  const [sort, setSort] = useState("");

  useEffect(() => {
    if (sort === "name") {
      const temp = [...items];
      temp.sort((a, b) => a.name - b.name);
      setItems(temp);
      console.log("sort by name!");
    } else if (sort === "number") {
      const temp = [...items];
      temp.sort((a, b) => a.id - b.id);
      setItems(temp);
      console.log("sort by number!");
    }
  }, [sort]);

  return (
    <main>
      <form>
        <label htmlFor="">sort by</label>
        <select name="sort" id="sort" onChange={(e) => setSort(e.target.value)}>
          <option value="">do nothing</option>
          <option value="name">by name</option>
          <option value="number">by number</option>
        </select>
      </form>
      {items.map((item, index) => {
        const { id, name } = item;

        return (
          <article key={index}>
            <h2>{name}</h2>
            <h4>{id}</h4>
          </article>
        );
      })}
    </main>
  );
}

选择输入有效：“setSort”在我的状态下发生变化。useEffect 也有效：当排序发生变化时，我会在控制台中收到这些消息。

问题是 useEffect 中的 sort 方法根本不起作用。我的 useEffect 中的 setCollection 不会使用新的排序数组更新状态，也不会触发重新渲染。

当我将“项目”放入依赖项数组时，它会引发一个无限循环。

我没有任何线索。谢谢！

标签： reactjssorting

解决方案

我看到的最大问题是你不能通过减去它们来对字符串进行排序：

console.log(
    ['a', 'd', 'c', 'x', 'b'].sort((a, b) => a - b)
)

你应该改用类似的东西localeCompare：

console.log(
    ['a', 'd', 'c', 'x', 'b'].sort((a, b) => a.localeCompare(b))
)

推荐阅读