OnClick 不起作用，但控制台中未出现错误答案

【问题标题】：OnClick is not working, but no errors appear in the consoleOnClick 不起作用，但控制台中未出现错误
【发布时间】：2020-04-15 01:05:56
【问题描述】：

由于我目前正在学习 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;

这是在添加按钮之前文件最初编写脚本的方式。

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;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

【解决方案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;

【讨论】：