Javascript 试图显示我创建的本地json文件中的随机数据，但在render中出现未定义的错误

我正在学习React，现在我正在尝试让我的应用程序显示来自我创建的JSON文件的随机笑话（包括问题和答案）。但是，我得到了以下错误：未定义getRandomJoke。我认为因为它是一个函数，所以不需要定义getRandomJoke。有人能解释一下我的错误在哪里，为什么我会犯这个错误吗

这是我创建的本地JSON文件： SportsJokesData.js

 const SportsJokesData = [
            {
                id: "1",
                question: "What did the baseball glove say to the ball?",
                answer: "Catch ya later!"

            },
            {
                id: "2",
                question: "What are the rules for zebra baseball?",
                answer: "Three stripes and you’re out."

            },
            {
                id: "3",
                question: "Why are umpires always overweight?",
                answer: "It’s their job to clean their plates."

            }

        export default SportsJokesData;

这是我创建的组件，它显示在我的浏览器上，SportsJokesApi.JS:

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

class SportsJokesApi extends React.Component {

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

    }

    render() {
        return (
            <p>{getRandomJoke}</p>
        )
        }
    }
          export default SportsJokesApi;

从“React”导入React
从“/SportsJokesData”导入SportsJokesData；
类sportsJokeAPI扩展了React.Component{
GetRandom笑话（）{
返回SportsJokesData[（SportsJokesData.length*Math.random（））Do
{this.getRandomJoke（）}
在
render（）中