[英]why does sorting in setSomething function of useState hook does not work?
我有 2 個組件。 一個是App
組件,另一個是NumbersList
組件。 NumbersList
是App
組件的子組件。 App
組件接收一個名為 lst 的數字列表作為 prop。 App
組件有 2 個按升序排序和按降序排序的按鈕,它們試圖按照名稱的含義進行排序。
應用組件:
import React, { useState } from 'react';
import './style.css';
import NumbersList from './NumbersList';
export default function App({ lst }) {
const [sortedLst, setSortedLst] = useState(lst);
function sortAscHandler() {
setSortedLst((prev) => prev.sort((a, b) => a - b));
}
function sortDescHandler() {
setSortedLst((prev) => prev.sort((a, b) => b - a));
}
return (
<div>
<button onClick={sortAscHandler}>Sort Ascending</button>
<button onClick={sortDescHandler}>Sort Descending</button>
<NumbersList lst={sortedLst} />
</div>
);
}
數字列表組件:
import React from 'react';
const NumbersList = ({ lst }) => {
return (
<ul>
{lst.map((num) => (
<li>{num}</li>
))}
</ul>
);
};
export default NumbersList;
主 index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const lst = [4, 3, 2, 1, 7, 6, 5, 100, 9, 8];
ReactDOM.render(<App lst={lst} />, document.getElementById('root'));
問題是單擊按鈕時,sortedLst 不會在視圖中更新。
stackblitz 鏈接: https://stackblitz.com/edit/react-jyqeuy?file=src%2Findex.js
先感謝您
Array.prototype.sort
是就地排序。 換句話說,它改變了它操作的數組並且不返回新的數組引用。
sort()
方法對數組的元素進行就地排序並返回排序后的數組。
先做一個淺拷貝,然后對新的數組引用進行排序。
export default function App({ lst }) {
const [sortedLst, setSortedLst] = useState(lst);
function sortAscHandler() {
setSortedLst((prev) => prev.slice().sort((a, b) => a - b));
}
function sortDescHandler() {
setSortedLst((prev) => prev.slice().sort((a, b) => b - a));
}
return (
<div>
<button onClick={sortAscHandler}>Sort Ascending</button>
<button onClick={sortDescHandler}>Sort Descending</button>
<NumbersList lst={sortedLst} />
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.