javascript - 递归方法返回未定义

Question

我正在写一些可以生成随机数的东西，它会检查它是否在数组中，如果是，它会生成一个不同的随机数，直到找到唯一的随机数并将其添加到数组中，依此类推。由于某种原因，它在递归运行后返回未定义。为什么？

返回2 index.js:26 检索到 2

index.js:26 找到重复的 2

index.js:26 返回 1

index.js:26 检索到未定义

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const MAX = 3;

class Clickity extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numbers: []
    }
  }

  generateRand = () => {
    // generate a random number 1 - MAX (3)
    let rand = Math.floor(Math.random() * MAX + 1);
    let { numbers } = this.state;

    // if length of array is equal to max return 0
    if (numbers.length === MAX) return 0;

    // check if generated number is in array
    if (numbers.includes(rand)) {
      console.log(`found a duplicate ${rand}`)
      // recursively run method
      this.generateRand();
    } else {
      // return the random number
      console.log(`returning ${rand}`)
      return rand;
    }
  }

  addNewNumber = () => {
    let id = this.generateRand();
    console.log(`retrieved ${id}`)
    let { numbers } = this.state;
    numbers.push(id);
    this.setState({ numbers });
  }

  render() {
    return (
      <div>
        <a onClick={() => this.addNewNumber()}>Generate unique number</a>
        <ul>{this.state.numbers.map((num) => <li>{num}</li>)}</ul>
      </div>
    )
  }
}

function App() {
  return (
    <Clickity />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您不返回 this.generateRand()