使用 react 钩子对数组进行排序

Question

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

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

Answer 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/

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

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