.map() 方法未从 return 函数生成新数组

Question

在一个反应挑战中，我应该创建一张需要生成 X 数量数字的卡片，其中 X 是用户的输入。所以我创建了一个名为“getRandomNum”的函数来生成一个范围内的随机数并验证该数字是否已经在数组中，如果是，将生成另一个数字。然后，我创建了另一个名为“generateNumbers”的函数来创建一个用户的输入大小数组，称为 arrayNumbers，然后使用 .map() 方法使用“getRandomNum”作为回调，将不重复的随机数插入数组中，那么问题来了，数组与 .map() 方法之前一样。请看下面的代码：

import './Megasena.css'
import { useState } from 'react'
 
const getRandomNum = (minParam, maxParam, array) => {
    let min = Math.ceil(minParam)
    let max = Math.floor(maxParam)
    let numGerado = parseInt(Math.floor(Math.random() * (max-min+1)) + min)
    
    return array.includes(numGerado) ?
        getRandomNum(minParam, maxParam, array) :
        numGerado
}
 
const generateNumbers = amountOfNumbers => {
    let arrayNumbers = Array(amountOfNumbers).fill(0)
    
    arrayNumbers.map(_ => getRandomNum(1, 99, arrayNumbers))
 
    if (amountOfNumbers <= 40) {
        return (arrayNumbers.map(num => {
            return (
                <li key={num} className="numberItem">{num}</li>
            )
        })
    )}   else {
        return (<p>A quantidade máxima de itens é 40!</p>)
    }
}
 
export default props => {
    const [numberOfItens, setNumberOfItens] = useState(0)
 
    return (
        <div className="megasenaComp">
            <div className="numbersArea">
                <ul className="numbersList">{generateNumbers(numberOfItens)}</ul>
            </div>
            <div className="inputArea">
                <label htmlFor="inputNumItens">Quantidade de Números:</label>
                <input id="inputNumItens" type="text" onChange={e=> {setNumberOfItens(+e.target.value)}}
                />
            </div>
        </div>
    )
}

Answer 1

map() 将始终 return 新数组 See this documentation.

因此，您应该将数据收集到一个新变量或重写现有变量，然后对其进行迭代。

您可以执行如下操作：

const generateNumbers = amountOfNumbers => {
  let arrayNumbers = Array(amountOfNumbers).fill(0)

  arrayNumbers = arrayNumbers.map(_ => getRandomNum(1, 99, arrayNumbers))

  if (amountOfNumbers <= 40) {
    return (arrayNumbers.map(num => {
        return (
            <li key={num} className="numberItem">{num}</li>
        )
    })
  )}   else {
    return (<p>A quantidade máxima de itens é 40!</p>)
  }
}

.map() 方法未从 return 函数生成新数组

.map() method not generating a new array from the return function

javascript

arrays

function

callback

reactjs