Question

我需要背景在api请求呈现的同时更改颜色。

我正在构建报价生成器。它是一个简单的单按钮界面，单击该界面即可加载新的报价并更改背景颜色。我找不到将两个方法绑定到同一click事件的好方法，因此我在同一方法中进行了API调用和颜色更改。问题是，颜色会立即更改，但是报价需要时间才能更新。我尝试在方法内调用组件DidMount，但这没有用。我确信有一种更简单的方法，我只是想念它。这是我的代码

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

     this.state = {
        quotes: [],
      colors: ["#16a085", "#27ae60",
             "#2c3e50", "#f39c12",
             "#e74c3c", "#9b59b6",
             "#FB6964", "#342224", 
             "#472E32", "#BDBB99",
             "#77B1A9", "#73A857"]
     }

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

}

getNext = (ev) =>{
  const {colors} = this.state
  const color = colors[Math.floor(Math.random()* colors.length)]
  var newQuote = Math.floor(Math.random() * 50)
  const API_URL = `http://quotesondesign.com/wp-json/posts? 
  filter[orderby]=rand&filter[posts_per_page]${newQuote}`
  ev.preventDefault()
  document.body.style.backgroundColor = color
  axios.get(API_URL)
  .then(res=> this.setState({quotes: res.data[0]}))
  document.body.style.backgroundColor = color
}

render(){
const {content,title} = this.state.quotes
const filteredContent = String(content).replace(/(<\w>)|(<\/\w>)| 
(&#\d{4})|(<\w* \/>)|(\/\w*)/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 (
        <button onClick={this.props.getNext} className='nextBtn' 
        type='button'>Next<button/>
    )
  }
}  

export default Button

我还将使字体的背景颜色发生变化，我想我可以弄清楚这一点，但是颜色的变化要比引号的变化快得多，这会使整个情况看起来很糟糕。它需要一次全部发生。

Answer 1

当前设置有两个选项：您可以在回调中更改setState调用的背景，也可以在传递给then的同一函数中调用它Axios的条款。

为什么？ Axios返回Promise，它代表异步请求（即API调用）的最终完成。成功（无错误）请求完成后，您的.then()调用就会触发。

否则，您的代码将继续执行，因此，为什么您的背景在API调用完成之前就发生了变化。

then（）

getNext = (ev) =>{
  const {colors} = this.state
  const color = colors[Math.floor(Math.random()* colors.length)]
  var newQuote = Math.floor(Math.random() * 50)
  const API_URL = `http://quotesondesign.com/wp-json/posts? 
  filter[orderby]=rand&filter[posts_per_page]${newQuote}`
  ev.preventDefault()
  document.body.style.backgroundColor = color
  axios.get(API_URL)
  .then(res=> { 
     this.setState({quotes: res.data[0]});
     document.body.style.backgroundColor = color;
  });
}

setState回调

getNext = (ev) =>{
  const {colors} = this.state
  const color = colors[Math.floor(Math.random()* colors.length)]
  var newQuote = Math.floor(Math.random() * 50)
  const API_URL = `http://quotesondesign.com/wp-json/posts? 
  filter[orderby]=rand&filter[posts_per_page]${newQuote}`
  ev.preventDefault()
  document.body.style.backgroundColor = color
  axios.get(API_URL)
  .then(res=> { 
     this.setState({quotes: res.data[0]}, () => {
       document.body.style.backgroundColor = color;
     });
  });
}

如何在ReactJS中的一个onClick方法中设置一个方法以完成API调用后的执行？

1 个答案: