OnClick 不工作，但控制台中沒有出現錯誤

Question

由於我目前正在學習 React，所以我正在創建一個笑話生成器。 我創建了一個本地文件並能夠提取數據（笑話）並將其顯示在瀏覽器上。 現在，我正在嘗試創建一個按鈕，當您單擊該按鈕時，它會顯示一個隨機笑話。 我可以看到笑話和按鈕，但沒有觸發任何操作。 我檢查了控制台，沒有錯誤。 如果我使用onClick = {randomJoke} ，那么我會收到一條錯誤消息，說聽眾期待的是 function，而不是 object。有人可以幫我指出問題所在嗎？

這就是我目前的設置方式：

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;

這是在添加按鈕之前文件最初編寫腳本的方式。

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;

Answer 1

您不能只在onClick事件上return一個新組件。 您需要先設置一些 state。 本指南很有用： https://flaviocopes.com/react-show-different-component-on-click/

Answer 2

當出現新笑話時，你需要重新渲染你的 React 組件。 為此，將randomJoke存儲在 React 組件的state中。

當您調用this.getRandomJoke時，您應該同時更新state ，以便觸發 React 組件的重新渲染。 發生這種情況時，UI 將更新為randomJoke的最新值

 import React from 'react' import SportsJokesData from './SportsJokesData'; const initialState = { randomJoke: null }; class SportsJokesApi extends React.Component { constructor(props) { super(props); this.getRandomJoke = this.getRandomJoke.bind(this); this.state = initialState; } getRandomJoke() { this.setState({ randomJoke: SportsJokesData[(SportsJokesData.length * Math.random()) << 0] }); } render() { const { randomJoke } = this.state; return ( <React.Fragment > <p> {randomJoke.question} </p> <p> {randomJoke.answer} </p> <button onClick = {this.getRandomJoke}>click here </button> </React.Fragment > ); } } export default SportsJokesApi;