使用 React hooks 对数组进行排序

我正在使用反应钩子对数组进行简单排序，但它不更新状态。谁能指出我要去这里做什么？

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];

function App() {
  const [dogList, setDogList] = useState(dogs);

  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
    alert(sorted[0].name);
  };

  return (
    <div>
      {dogs.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

第一：因为Array.prototype.sort() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Return_value已就位，在排序之前克隆：

const sorted = [...dogList].sort((a, b) => {
  return b.age - a.age;
});

如果没有这个，更改检测将无法检测到阵列的更改。

你打电话给地图dogs. Fix:

  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );

Demo: https://jsfiddle.net/acdcjunior/kpwb8sq2/1/ https://jsfiddle.net/acdcjunior/kpwb8sq2/1/