Javascript OnClick不工作，但控制台中没有出现错误

当我正在学习React时，我正在创建一个笑话生成器。我创建了一个本地文件，能够提取数据（笑话）并将其显示在浏览器上。现在，我试图创建一个按钮，当你点击时，它会显示一个随机笑话。我可以看到笑话和按钮，但没有触发任何动作。我检查了控制台，没有错误。如果我使用

onClick={randomJoke}

，那么我会得到一个错误，说侦听器需要的是函数，而不是对象。有人能帮我指出问题所在吗

这是我目前的设置方式：

import React from 'react'
import SportsJokesData from './SportsJokesData';

class SportsJokesApi extends React.Component {

    constructor(props){
        super(props);
        this.getRandomJoke = this.getRandomJoke.bind(this);
    }

    getRandomJoke(){
       return SportsJokesData[(SportsJokesData.length * Math.random()) << 0]

    }

    render() {
        const randomJoke =  this.getRandomJoke()
        return (
        <React.Fragment>
             <p> {randomJoke.question}</p>
            <p>{randomJoke.answer}</p>

        <button onClick={this.getRandomJoke}>
           click here
        </button>
        </React.Fragment>
        )
        }
    }
          export default SportsJokesApi;

从“React”导入React
从“/SportsJokesData”导入SportsJokesData；
类sportsJokeAPI扩展了React.Component{
建造师（道具）{
超级（道具）；
this.getRandomJoke=this.getRandomJoke.bind（this）；
}
GetRandom笑话（）{
返回SportsJokesData[（SportsJokesData.length*Math.random（））您不能只在
onClick
事件上返回一个新组件。您需要先设置一些状态。本指南非常有用：
当出现新笑话时，您需要重新渲染您的React组件。要执行此操作，请将
随机笑话
存储在React组件的
状态中

调用
this.getRandom笑话
时，应同时更新
状态
，以便触发React组件的重新呈现。发生这种情况时，UI将使用
Random笑话
的最新值进行更新


从“React”导入React
从“/SportsJokesData”导入SportsJokesData；
常量初始状态={
随机笑话：空
};
类sportsJokeAPI扩展了React.Component{
建造师（道具）{
超级（道具）；
this.getRandomJoke=this.getRandomJoke.bind（this）；
this.state=初始状态；
}
GetRandom笑话（）{
这是我的国家({
randomJoke:SportsJokesData[（SportsJokesData.length*Math.random（））
import React from 'react'
import SportsJokesData from './SportsJokesData';

class SportsJokesApi extends React.Component {

    getRandomJoke(){
       return SportsJokesData[(SportsJokesData.length * Math.random()) << 0]

    }

    render() {
        const randomJoke =  this.getRandomJoke()
        return (
            <React.Fragment>
            <p>{randomJoke.question}</p>
            <h1>{randomJoke.answer}</h1>
            </React.Fragment>           
        )
        }
    }
          export default SportsJokesApi;