Question

class QuoteBox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      quoteData: [],
      quote: '',
      author: ''
    }
    this.randomQuote = this.randomQuote.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const API = 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/'
    fetch(API)
        .then((response) => response.json())
        .then((data) => {
            this.setState({
              quoteData: data.quotes
            })
        })
        .catch(error => console.log('Error', error));

    this.randomQuote();
  }

  randomQuote() {
    const randomNumber = Math.floor(Math.random() * this.quoteData.length);
    return this.quoteData[randomNumber];
  }

  handleClick() {
    const oneRandomQuote = this.randomQuote();
    this.setState({
      quote: oneRandomQuote.quote,
      author: oneRandomQuote.author
    })
  }

  render() {
    return (
      <div id='quote-box'>
        <h1 id='text'>
          {this.state.quote}
        </h1>
        <h3 id='author'>
          - {this.state.author}
        </h3>
        <Buttons handleClick={this.handleClick}/>
      </div>
    )
  }
}

class Buttons extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className='buttons'>
        <a id='tweet-quote' className='button' href={`https://twitter.com/intent/tweet/?text=${this.props.quote} - ${this.props.author}`}><i className='fab fa-twitter'></i></a>
        <button id='new-quote' className='button' onClick={this.props.handleClick}>
          New quote
        </button>
      </div>
    )
  }
}

ReactDOM.render(
  <QuoteBox />,
  document.getElementById('root')
)

我正在通过获取API使用React构建一个随机报价生成器我尝试过，但是，因为我是编程的初学者，所以我需要上面所写代码的一些指导。

我试图设置一组提取到quoteData的报价数据，并在报价数据中呈现报价和作者，但是它无法按我期望的方式工作。

Answer 1

您需要将this.quoteData更改为this.state.quoteData，因为引号在状态变量中。为了在单击按钮之前显示报价，请在handleClick()回叫中调用setState。检查更改的代码

class QuoteBox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      quoteData: [],
      quote: '',
      author: ''
    }
    this.randomQuote = this.randomQuote.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const API = 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/'
    fetch(API)
        .then((response) => response.json())
        .then((data) => {
            this.setState({
              quoteData: data.quotes
            },()=>{
              // add handle click function here, so that a random quote in shown on initial load
              this.handleClick();
            })
        })
        .catch(error => console.log('Error', error));
        // remove randomQuote() call from here, there is no use of that call here.

  }

  randomQuote() {
    const randomNumber = Math.floor(Math.random() * this.state.quoteData.length);
    return this.state.quoteData[randomNumber];
  }

  handleClick() {
    const oneRandomQuote = this.randomQuote();
    this.setState({
      quote: oneRandomQuote.quote,
      author: oneRandomQuote.author
    })
  }

  render() {
    return (
      <div id='quote-box'>
        <h1 id='text'>
          {this.state.quote}
        </h1>
        <h3 id='author'>
          - {this.state.author}
        </h3>
        <Buttons handleClick={this.handleClick}/>
      </div>
    )
  }
}

class Buttons extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className='buttons'>
        <a id='tweet-quote' className='button' href={`https://twitter.com/intent/tweet/?text=${this.props.quote} - ${this.props.author}`}><i className='fab fa-twitter'></i></a>
        <button id='new-quote' className='button' onClick={this.props.handleClick}>
          New quote
        </button>
      </div>
    )
  }
}

Answer 2

请尝试如下更改您的randomQUote函数。您正在尝试从您的此范围返回不存在的内容。

function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum;
}

React Fetch API报价随机生成器

2 个答案: