Как показать случайные числа по возрастанию на react.js?

Пользователь

от hermina.hauck , в категории: JavaScript , 2 года назад

Как показать случайные числа по возрастанию на react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от magdalen_kub , 2 года назад

@hermina.hauck 

Можно использовать функцию sort() для сортировки массива случайных чисел. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { useState } from "react";

function RandomNumbers() {
  const [numbers, setNumbers] = useState([]);

  const generateNumbers = () => {
    const randomArray = Array.from({ length: 10 }, () =>
      Math.floor(Math.random() * 100)
    );
    setNumbers(randomArray.sort((a, b) => a - b));
  };

  return (
    
      Generate random numbers
      
        {numbers.map((num) => (
          {num}
        ))}
      
    
  );
}

export default RandomNumbers;


В этом примере мы создаем массив из 10 случайных чисел и используем функцию sort() для сортировки по возрастанию. Затем мы отображаем отсортированный массив в виде списка.

Пользователь

от brook , год назад

@hermina.hauck 

import React, { useState, useEffect} from "react";


function RandomNumbers() { const [numbers, setNumbers] = useState([]);


useEffect(() => { generateNumbers(); }, []);


const generateNumbers = () => { const randomArray = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100) ); const sortedArray = randomArray.sort((a, b) => a - b); setNumbers(sortedArray); };


return ( Generate random numbers {numbers.map((num) => ( {num} ))} ); }


export default RandomNumbers;


in this example, we use the useEffect hook to generate the random numbers only once when the component mounts. We store the generated random numbers in the state variable "numbers". When the "Generate random numbers" button is clicked, the generateNumbers function is called, which generates a new array of random numbers, sorts it using the sort() function, and updates the "numbers" state with the sorted array. The sorted array is then rendered as a list using the map() function. Each number is wrapped in an li element with a unique key to avoid any warnings.