Как сделать запрос API В React по нажатию кнопки

Question

Я пытаюсь создать генератор случайных котировок, который загружает квоту в componentDidMount с помощью запроса axios api, а затем загружает новые цитаты по нажатию кнопки.

Это для проекта freecodecamp.Я попытался снова сделать звонок по нажатию кнопки, затем добавить новый респон в состояние, но он не будет работать вообще.

import React, { Component } from 'react'
import Button from './Button';
import axios from 'axios'
class QuoteBox extends Component{
constructor(props){
    super(props)

    this.state = {
      quotes: []

    }

 }
componentDidMount(){
 axios.get('http://quotesondesign.com/wp-json/posts? 
filter[orderby]=rand&filter[posts_per_page]=1')
 .then(res=> this.setState({quotes: res.data[0]}))

}
getNext = (ev) =>{
  ev.preventDefault()
  axios.get('http://quotesondesign.com/wp-json/posts? 
filter[orderby]=rand&filter[posts_per_page]=2')
  .then(res=> this.setState({quotes:[...this.state,res.data[0]]}))
}


render(){
const {content,title} = this.state.quotes
const filteredContent = String(content).replace(/(<\w>)|(<\/\w>)| 
(&#\d{4})/gm, "").replace(/(;)/g,"'")
 console.log(content)

 return(
   <React.Fragment>
      <h2>A little inspiration for the day</h2>
      <div className='outerQuoteBox'>
        <div className='innerQuoteBox'>
            <p>{filteredContent}</p><br/><br/>{title}
        </div>
        <Button getNext={this.getNext} />
    </div>
    </React.Fragment>)
   }
  }
export default QuoteBox

И это мой компонент кнопки

import React, { Component } from 'react'

export class Button extends Component {
 render() {
  return (
   <React.Fragment>
    <button onClick={this.props.getNext} className='nextBtn' 
      type='button'>Next</button>
    </React.Fragment>
   )
 }
}

export default Button

Когда я нажимаю кнопку, кажется, что запрос не проходит вообще.Если я проверяю State в инструментах dev, только первая кавычка из componentDidMount находится в массиве.Я не понимаю, где моя ошибка.

Редактировать: Я использовал неправильную ссылку на реквизит, поэтому он не сделал колл.Я исправил это, и теперь он делает звонок, и он вводит одну новую цитату, но это так.И он не добавляет новый в состояние, он просто заменяет его новым.и это все, что он будет делать.В инструкциях API указано, что конечная точка, которую я использую, должна возвращать новую случайную кавычку, но это не так.

Answer 1

Похоже, вы ссылаетесь на неправильную опору на кнопке.

Измените getQuote на getNext, и оно должно работать ...

import React, { Component } from 'react'

export class Button extends Component {
 render() {
  return (
   <React.Fragment>
    <button onClick={this.props.getNext} className='nextBtn' 
      type='button'>Next</button>
    </React.Fragment>
   )
 }
}

export default Button