时间戳

首页 > 解决方案 > 返回排序后的数组 React

javascript - 返回排序后的数组 React

问题描述

如何从方法返回排序后的数组。这是我需要将排序后的数组显示为列表的代码。当我从 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>
 )
}

标签： javascriptreactjs

解决方案

您需要将 numbers 数组存储在一个 state 中，然后更新 state 以重新渲染。

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

推荐阅读