javascript - 尝试显示我创建的本地 json 文件中的随机数据，但在渲染中出现未定义的错误

Question

我正在学习 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;

Answer 1

做<p>{this.getRandomJoke()}</p>在你的render()里面