构建第一个 React component/app，axios 返回重复响应的问题

Question

这是我的反应组件

import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
import React from 'react';
import axios from 'axios';

const quoteIcon = <FontAwesomeIcon icon={faQuoteLeft} />;
const twitterIcon = <FontAwesomeIcon icon={faTwitter} />;


class App extends React.Component {
  state = {
    quote: ''
  };
  componentDidMount(){
    this.fetchQuote();
  }

  fetchQuote = () => {
    axios.get("https://api.quotable.io/random")
    .then((response)=>{
      const {quote} = response.data.content;

      this.setState({ quote });
    })
    .catch(error => console.log(error));
  }
  
  render() {
    const { quote } = this.state;
    return (
      <div id='wrapper'>
        <div id='quote-box'>
          <div className='quote-text'>
            <div id='quoteIcon'>{quoteIcon}</div><span id='text'>{this.state.quote}</span>
          </div>
          <div className='quote-author'>-<span id='author'></span></div>
  
          <div className='buttons'>
            <a href="link" className='button' id='tweet-quote'>{twitterIcon}</a>
            <button className='button' id='new-quote' onClick={this.fetchQuote}>New quote</button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

我无法在屏幕上呈现报价。我试图 console.log 在收到对 axios 的回复后发生了什么，并且由于某种原因我不断接到两个电话。我记录了两个不同的报价。我不确定这是否就是我在渲染时遇到问题的原因。

我已经尝试使用其他方法，如获取，但我仍然收到重复的回复。我在想这是我的 componentDidMount() 出于某种原因多次安装？但我不知道为什么会那样做。但是我需要它在组件安装时加载我的功能，所以我不想不使用它。当我摆脱它时，它显然不是运行我的功能，但我相信它仍然得到双重响应。

Answer 1

虽然出于某种原因它仍然记录两个引号，但我认为它没有呈现到屏幕的问题是我设置状态的方式。

我做到了

this.setState({
  quote: response.data.content
});

Answer 2

您的数据是： response.data {_id: "UBum36vM5", tags: Array(1), content: "Remember that a gesture of friendship, no matter how small, is always appreciated.", author: "H. Jackson Brown Jr.", authorSlug: "h-jackson-brown-jr"…}

可是你（解构“引用”）什么都不存在。

const {quote} = response.data.content; const quote = response.data.content;

Answer 3

问题是当你在 fetchQuote 函数内部解构时

而不是这个 > const {quote}=response.data.current

您可以将其替换为 > const quote=response.data.current

response.data.current 中没有类似引用的内容这就是为什么你的报价没有得到设置。

构建第一个 React component/app，axios 返回重复响应的问题

Building first React component/app, issues with axios returning duplicate responses

javascript

reactjs

axios