为什么在 useState hook 的 setSomething 函数中排序不起作用？

Question

我有两个组成部分。一个是 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>
  );
}

NumbersList 组件：

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-link：https://stackblitz.com/edit/react-jyqeuy?file=src%2Findex.js

提前致谢

Answer 1

Array.prototype.sort 是 in-place 排序。换句话说，它改变了它所操作的数组，而不是 return 一个新的数组引用。

Array.prototype.sort

The sort() method sorts the elements of an array in place and returns the sorted array.

先进行浅拷贝，然后对新数组引用进行排序。

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

为什么在 useState hook 的 setSomething 函数中排序不起作用？

why does sorting in setSomething function of useState hook does not work?

javascript

arrays

reactjs

react-hooks

use-state