Undefined array.lenght 当作为参数传递给 reactjs 中的函数时

Question

在下面的代码中，函数 GetRandomInt 从函数 App 中获取输入最大值。假定的输出 console.log 应该只打印参数值。但是它在控制台中打印出 Undefined。

const GetRandomInt = ({max}) => {
  console.log(max)
  return Math.floor(Math.random() * (max))
}


const Button = (props) => {
  return (
    <button onClick={props.handleClick}>
      {props.text}
    </button>
  )
}

const Display = (props) => {
  return (
    <div>
      {props.text}
    </div>
  )
}

const App = () => {
  const anecdotes = [
    'If it hurts, do it more often',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ]
  const [selected, setSelected] = useState(0)
  const len = anecdotes.length
  console.log(len)
  const handleClick = () => {
    console.log(Math.floor(Math.random() * (anecdotes.length)))
    const index = GetRandomInt(len) // Math.floor(Math.random() * (anecdotes.length))
    while (index === selected) {
      index = GetRandomInt(len) // Math.floor(Math.random() * (anecdotes.length))
    }
    setSelected(index)
  }
  return (
    <div>
      <h1>Anecdote of the day</h1>
      <Display text={anecdotes[selected]} />
      <Button handleClick={handleClick} text={'Next anecdote'} />
      {/* {anecdotes[selected]} */}
    </div>
  )
}

以上代码将三个值打印到控制台

已分配包含数组长度的变量
直接使用数组长度创建随机整数
将值传递给函数以在步骤 2 中使用函数实现相同的目的

谁能告诉我为什么会这样？我是否错误地传递了数据类型不匹配或其他原因的值？我是 reactjs 的新手，正在学习一门课程，这是我遇到困难的练习之一。

Answer 1

缺陷出在您的 GetRandomInt 函数中。它目前需要一个带有 max 属性的对象，而您正在向它传递一个数字。

重写为

const GetRandomInt = (max) => {
  console.log(max)
  return Math.floor(Math.random() * (max))
}

参数名称周围的大括号本质上是告诉函数“获取给定的第一个参数的属性 max”，而在您的情况下，您需要参数本身，而不是它的 max 属性.

您可以阅读有关对象解构的更多信息here

Undefined array.lenght 当作为参数传递给 reactjs 中的函数时

Undefined array.lenght when passed as an argument to a function in reactjs

javascript

parameter-passing

reactjs