Reactjs Axios不会在单击时调用的函数中从API更新状态，但会在React中的组件装载上使用相同的函数

我正在使用Axios在一个基本的React组件中开发一个基本的API pull。当我的组件挂载时，我拉一个API，它是一个随机引用的Chuck Norris，它工作得非常好。然而，当我试图在一个名为onClick的相同函数中创建一个新的pull和update状态时，我会收到一条错误消息，上面说“unhandledRejection（TypeError）：无法读取undefined的属性'setState'

但是，当我从API pull中记录值时，它们会给我预期的结果，所以我不明白为什么我可以记录一个值，获取一个字符串，然后让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

import React，{Component}来自“React”
从“axios”导入axios
类应用程序扩展组件{
状态={
引号：“”
}
componentDidMount（）{
axios.get（）https://api.chucknorris.io/jokes/random')
。然后（res=>{
console.log（'response'，res.data.value）
这是我的国家({
引用：res.data.value
})
})
}
getNewFact（）{
axios.get（）https://api.chucknorris.io/jokes/random')
。然后（res=>{
console.log（'response'，res.data.value）
这是我的国家({
引用：res.value
})
})
}
渲染（）{
返回(
查克·莫里斯的真相
{this.state.quote}

得到新的事实
)
}
}
导出默认应用程序

试试看

然后在getNewFact函数中将其设置为

quote: res.value

---

您必须使用arrow函数而不是normal函数，因为

this

没有直接指向类。因此，不是：

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

}

将是：

getNewFact = () => {
axios.get('https://api.chucknorris.io/jokes/random')
  .then(res => {
    console.log('response', res.data.value)
    this.setState({
    quote: res.data.value // also fix this or nothing will show after clicking the button
  })
})

}

从“React”导入React，{Component}
从“axios”导入axios
类应用程序扩展组件{
状态={
事实：“”
}
handleonClick=（）=>{
axios.get（）https://api.chucknorris.io/jokes/random')
。然后（res=>{
console.log（res.data.value）
这是我的国家({
事实：res.data.value
})
})
}
componentDidMount（）{
axios.get（）https://api.chucknorris.io/jokes/random')
。然后（res=>{
console.log（res.data.value）
这是我的国家({
事实：res.data.value
})
})
}
render（）{
返回(
查克·诺里斯事实
{this.state.fact}



新事实
)
}
}
导出默认应用程序；

下次尝试用谷歌搜索控制台中出现的错误消息。这样，您可以快速找到解决方案。如果搜索：

setState未定义

，您将得到相同的问题和答案：

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

getNewFact = () => {
axios.get('https://api.chucknorris.io/jokes/random')
  .then(res => {
    console.log('response', res.data.value)
    this.setState({
    quote: res.data.value // also fix this or nothing will show after clicking the button
  })
})

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;