reactjs - Axios 未在 Click 调用的函数中从 API 更新状态，但在 React 中的组件安装上使用相同的函数

Question

我正在使用 Axios 在基本 React 组件中进行基本 API 拉取。当我的组件安装时，我拉取了一个 API，它是一个随机的 Chuck Norris 引用，它工作得很好。但是，当我尝试在名为 onClick 的相同函数中创建新的拉取和更新状态时，我收到一条错误消息，指出“未处理的拒绝 (TypeError):无法读取未定义的属性‘setState’。”

但是，当我 console.log 来自 API pull 的值时，它们给了我预期的结果，所以我不明白为什么我可以 console.log 一个值，得到一个字符串，然后让 React 告诉我那个字符串未定义。

我查看了几个 stackoverflow 线程，我看到的答案看起来与我当前的非工作解决方案几乎相同。任何见解将不胜感激。

import React, {Component} from 'react'
import axios from 'axios'


class App extends Component {
  state = {
    quote: ''
  }

  componentDidMount(){
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(res => {
        console.log('response', res.data.value)
        this.setState({
          quote: res.data.value
        })
      })
  }

  getNewFact(){
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(res => {
        console.log('response', res.data.value)
        this.setState({
        quote: res.value
      })
    })
  }

  render () {
    return(
      <div>
      <h1>Chuck Norris Facts</h1>
      <p>{this.state.quote}</p>
    <button onClick={this.getNewFact}>get new fact</button>
    </div>
    )
  }
}

export default App

Answer 1

import React, {Component} from 'react'
import axios from 'axios'

class App extends Component {

  state = {
    fact:''
  }

  handleonClick = () => {
    axios.get('https://api.chucknorris.io/jokes/random')
    .then(res => {

      console.log(res.data.value)
      this.setState({

        fact: res.data.value
      })
    })
  }
  
  componentDidMount(){
    axios.get('https://api.chucknorris.io/jokes/random')
    .then(res => {

      console.log(res.data.value)
      this.setState({

        fact: res.data.value
      })
    })
  }

  render(){
    return(
      <div>
        <h1 class='title'>Chuck Noris facts</h1>
        <p>{this.state.fact}</p>
        <br/>
        <button className='fact-btn' onClick={this.handleonClick}>New Fact</button>
      </div>
    )
  }
}

export default App;