在我添加箭头函数来调用我正在使用的函数后，onClick 事件不起作用

Question

我正在学习 React，现在，我正在尝试向我的按钮添加一个 onClick 事件，单击该事件时，它将显示一个从 Rest API 获取的笑话。我阅读了文档，它说要发生 onclick 事件，您需要调用您使用的函数，在这种情况下是 componentDidMount。我最初使用{this.componentDidMount}并收到以下错误消息：Cannot read property 'setState' of undefined. 所以我做了一些研究，发现我需要使用箭头函数来调用 componentDidMount。我应用了它，当我单击按钮时，笑话没有改变，当我检查控制台时，没有任何错误。有人能说出可能出了什么问题以及如何解决吗？import React, { Component } from 'react';class DadJokesApi extends Component {    constructor(props){        super(props);        this.state = {            jokes: [],        };    }    componentDidMount(){        fetch('https://cors-anywhere.herokuapp.com/https://icanhazdadjoke.com/', {            headers: {                'Content-Type': 'appliction/json',                'Accept': 'application/json'            }        })            .then(response => response.json())            .then(data => this.setState(prev => ({jokes: prev.jokes.concat(data)})))    }    render () {        return (            <ul>                {this.state.jokes.map(joke =>                   <div key={joke.id}>                     <p>{joke.joke}</p>                     <button onClick={()=>this.componentDidMount}></button>                  </div>                    )}            </ul>        )    }}export default DadJokesApi;

Answer 1

没有得到预期结果的原因有几个：

1. componentDidMount是一个生命周期函数。你不能使用它。

2. 的原因Cannot read property 'setState' of undefined是您不会将事件与thisin绑定constructor

我在您的代码中更新了几件事：

1. 创建一个单独的函数，不使用生命周期函数作为点击事件

2. 将函数与构造函数绑定this，使函数具有this上下文。

在此处检查您的工作代码的 stackblitz 示例。