Javascript 返回排序后的数组

如何从方法返回已排序的数组。 这是我需要将排序数组显示为列表的代码。当我从sortList返回数字时，它不起作用。为什么？返回编号不返回JSX中的数组。不是使用return语句的正确位置

function RenderList(props){
 let numbers=props.number;
 function sortList(){
    numbers.sort();
    return numbers
 }
 const numList=numbers.map((num)=>(
    <li>{num}</li>
 ))
 return(
   <div>
    <h2>Rendering List</h2>
    <button onClick={sortList}>SortList</button>
    <ul>{numList}</ul>
   </div>
 )
}

---

您需要在状态中存储数字数组，然后更新状态以重新渲染

function RenderList(props){
 const [numbers, setNumbers] = useState(props.numbers);
 function sortList(){
    setNumbers(numbers.slice().sort());
 }
 const numList=numbers.map((num)=>(
    <li>{num}</li>
 ))
 return(
   <div>
    <h2>Rendering List</h2>
    <button onClick={sortList}>SortList</button>
    <ul>{numList}</ul>
   </div>
 )
}

---

如果你真的不想使用useState，那么你可以这样做

const [sort, setSort] = useState(false);

<button onClick={triggerSort}>SortList</button>

const triggerSort = () => {
    if (!sort) {//if you remove this check and keep only setSort(!sort) then you can get sorted and non-sorted list when clicking
        setSort(!sort)
    }        
}

const numList= (sort ? [...numbers].sort() : numbers).map((num)=>(
    <li>{num}</li>
))

---

您需要创建一个设置状态才能重新呈现组件。无法使用功能组件对列表进行排序。我不想使用状态here@kalhan您能否提供一个示例您可以使用useState钩子向功能组件引入状态：是否可以在不使用状态的情况下对数组进行排序，但它是ReactJS中的反模式

const numbersList = useMemo(() => {
    return sort ? [...numbers].sort() : numbers
}, [sort]);
.....
<ul>
   {
      numbersList.map(num => <li>{num}</li>)
   }
</ul>