使用反应钩子对数组进行排序答案

【问题标题】：sort an array with react hooks使用反应钩子对数组进行排序
【发布时间】：2022-12-29 17:49:38
【问题描述】：

我正在做一种简单的带有反应挂钩的数组，但它没有更新状态。谁能指出我要去这里做什么？

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

【问题讨论】：

你有代码示例吗？

标签： javascript reactjs react-hooks

【解决方案1】：

首先：因为Array.prototype.sort()已经到位，所以在排序之前克隆：

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

没有这个，变化检测将不会检测到数组发生变化。

你在dogs上调用地图。使固定：

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

演示：https://jsfiddle.net/acdcjunior/kpwb8sq2/1/

【讨论】：

我就知道跟这个有关！

【解决方案2】：

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
class Application extends React.Component {
  state = {dogList: dogs};

  sortByAge = () => {
    const sorted = this.state.dogList.sort((a, b) => {
      return b.age - a.age;
    });
    this.setState({dogList: sorted});
  };

  render() {
    return (
      <div>
        {this.state.dogList.map((dog, i) => {
          return <p key={i}>{dog.name}</p>;
        })}
        <button onClick={this.sortByAge}>sort by age</button>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

这是使用钩子的代码

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

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
function Application() {
  const [dogList, setDogList] = useState(dogs);
  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
  };
  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <button onClick={sortByAge}>sort by age</button>
    </div>
  );
}

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

【讨论】：

不错的答案。下次只需添加一些解释和上下文。
当请求是使用挂钩的解决方案时，为什么您使用类组件提供答案？（顺便说一句，你的回答没有错）
@evolutionxbox。因为我想向您展示一个带有代码 sn-p 的实例。所以我使用类组件。但如果你愿意，我会提供使用钩子的例子。
不不，没关系。我觉得很奇怪，仅此而已

【解决方案3】：

按名称排序示例...

const dogs = [{ name: "bido", age: 22 }, { name: "aill", age: 50 }, { name: "test", age: 90 }];

function App() {
  const [dogList, setDogList] = React.useState(dogs);
  function compare(a, b) 
{
  if (a.name > b.name) return 1;
  if (a.name < b.name) return -1;
  return 0;
}
  const sortByAge = () =>
{

    const sorted = [...dogList].sort(compare);//calling compare function
    setDogList(sorted);//storing sorted values
    
  };

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

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

【讨论】：