React App에서 API 호출 후 불투명 전환의 타이밍

Question

흥미로운 문제가 있습니다. 내 반응 앱에 문제가 있습니다. getRandomQuote()를 호출하는 버튼이 있습니다. API에서 텍스트 줄을 가져 와서 프런트 엔드에 전달합니다. 텍스트 불투명도를 0으로 설정하고 텍스트가 표시된 후 1로 설정합니다. 호출 후 대신, 텍스트, 다음 1

getRandomQuote() { 

    document.getElementById('quoteText').style.opacity = 0; 

    axios.get('http://localhost:3100/quote').then(response => { 

     console.log('1111111', response); 

     this.setState({quote: response.data[0].quote_text, quoteAuthor: response.data[0].author}); 
     document.get 
    document.getElementById('quoteText').style.opacity = 1; 

     }) 
    } 

index.css

.quoteText { 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 

} 

.quoteAuthor { 
    transition: 1s ease-in-out; 

} 

appContent.js는 불투명로 전환, 0 불투명으로 변 나타납니다

render() { 
    return (
     <div className="app" style={ styles.appContent }>   
      <header> 
      <i class="fa fa-arrow-left" aria-hidden="true"></i> 
      </header> 
      {/* <ParticleContainer style ={styles.particleBackground}></ParticleContainer> */} 
      <div style={ styles.aboveParticles }> 
       <Title words="QUOTE MACHINE" style={styles.title}/> 
       <div style={ styles.quoteBox }> 
       <h2 id="quoteText" className="quoteText" style={styles.quoteText }>{ this.state.quote }</h2> 
       <h2 id="quoteAuthor" className="quoteAuthor" style={ styles.quoteAuthor }>{ this.state.quoteAuthor }</h2> 
       </div> 
       <button className ="button" onClick={()=>{this.getRandomQuote(); this.changeBackgroundColor(); } } style={ styles.button }>Retrieve a Quote</button> 
      </div> 
     </div> 
    ); 
    } 

Answer 1

귀하의 설명 분명하지 않다. 텍스트는 첫 번째 클릭 후 불투명도 0에서 1로 표시되고 불투명도 1에서 0으로 사라지고 두 번째 클릭 후 불투명도 0에서 1로 표시됩니다. 당신은 텍스트가 두 번째 클릭 후 즉시 사라 원하는 뜻 경우

, 당신은

this.setState({quote: ''});

에 getRandomQuote의 첫 번째 라인을 변경할 수 있습니다