React显示“函数作为React子函数无效。如果您从渲染返回Component而不是，则可能会发生这种情况”

Question

以下是主要游戏.js和应用程序.js文件：

//Heres the game file//

import React, { Component } from "react";

class Game extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 0 };
    this.numPicker = this.numPicker.bind(this);
  }
  numPicker(e) {
    let rand = Math.floor(Math.random() * this.props.maxNum);
    return rand;
  }
  render() {
    return (
      <div>
        <h1>Hellow World {this.numPicker}</h1>
      </div>
    );
  }
}

export default Game;



//Heres the main file://


import React from "react";

import "./App.css";
import Game from "./game";

function App() {
  return (
    <div className="App">
      <Game maxNum={1} />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在game.js文件中，我在H1中使用了numPicker函数。现在我得到了这个错误:

警告：函数作为React子函数无效。如果您返回组件而不是从渲染中返回，可能会发生这种情况。或者您可能打算调用此函数而不是返回它。

Answer 1

您需要调用 numPicker 函数，该函数返回一个数据，然后可以呈现该数据

<h1>Hellow World {this.numPicker()}</h1>