我有一個 useState 如下：
const [drivers, setDrivers] = useState(useSelector(selectFilteredDrivers));
這里的驅動程式是一個我們可以映射的陣列。
我有一個排序功能，可以對驅動程式串列進行排序：
const sortDrivers = useCallback(
(sortBy: string) => {
const sortFunction = (
a: DeliveryDriver,
b: DeliveryDriver,
sort: string,
) => {
if (sortBy === 'desc') {
return Number(a.isAvailable) - Number(b.isAvailable);
} else {
return Number(b.isAvailable) - Number(a.isAvailable);
}
};
const sortedListOfDrivers = drivers.sort((a, b) =>
sortFunction(a, b, sortBy),
);
console.log('sortedList', sortedListOfDrivers);
setDrivers(sortedListOfDrivers);
},
[drivers],
);
如您所見，我對串列進行了排序并將串列設定為 sortedListOfDrivers。在下面，我通過驅動程式串列映射以回傳每個驅動程式的驅動程式組件：
const rows = drivers.map(driver => (
<Driver
driver={driver}
key={driver.driverId}
handleRowOnClick={driverDetailClickHandler}
/>
));
如果您想知道，行是我作為道具傳遞給 Table 組件的東西。
render (
<Table headers={headers} rows={rows} />
)
該函式作為回呼傳遞并附加到 onClick。
當我在排序后 console.log 驅動程式時，它顯示驅動程式陣列在單擊后會相應更新，因此排序功能在幕后作業得很好。
問題是在 UI 中我的串列保持不變（就像排序之前一樣）并且它不會重新渲染串列以使其在單擊后排序。
注意：不確定它是否與該問題有關，但由于某種原因，當我開始在輸入欄位中輸入與排序功能無關的內容時，UI 會重繪 以顯示排序串列。
執行功能（單擊按鈕）時，如何使其更新驅動程式串列？
我嘗試將映射部分放在 useEffect() 中。它沒有用。
任何建議表示贊賞。
uj5u.com熱心網友回復：
Array.prototype.sort()
sort() 方法對陣列的元素進行就地排序并回傳排序后的陣列。默認排序順序是升序，將元素轉換為字串，然后比較它們的 UTF-16 代碼單元值序列。
這意味著那sortedListOfDrivers === drivers是true并且setDrivers認為沒有任何改變。您應該創建一個新陣列以避免這種情況：
setDrivers([...sortedListOfDrivers]);
注意：drivers.sort更改變數而不通知反應。所以它不會更新你的 UI，直到其他東西觸發重新渲染。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427516.html
標籤：javascript 反应 打字稿 排序
上一篇：在Tcl中創建子串列和排序