返回排序后的数组 React

Question

如何从方法返回排序后的数组。 这是我从sortList((返回数字时需要将排序数组显示为 list.it 工作的代码。为什么？返回数字不返回 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>
)
}

Answer 1

您需要将数字数组存储在某个状态中，然后更新该状态以重新呈现。

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

Answer 2

如果你真的不想使用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>
))

这是演示

---

如果您认为排序在每个渲染中都是一件复杂的事情，请使用useMemo，因此排序仅在sort发生变化时才调用。

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

演示