戻り値のコンポーネント内部関数が機能しない

Question

私はいくつかの条件を考慮してレンダリングするコンポーネントを持っています。

const Test =() => { 
    return <div className="text_align_center white_color"> 
     <span><i className="fa fa-exclamation-triangle" aria-hidden="true"></i> 
      No internet connection. Please check your connection settings and try again 
     </span> 
    </div> 
} 

function checkInternetConnection(){ 

    isOnline().then(online => { 

     if(online === true){ 

      console.log("Came in here") 

      return <Test/> 

     } 

    }); 
} 

const App =() => (
    <div className="ui container"> 

     {checkInternetConnection()} 
); 

を次のように、私は私の関数を呼び出しています。しかし、問題は、本家の私は、返されたコンポーネントが表示されない場合、checkInternetConnection関数内でコンソールログを取得していますされています。これは次のように行われていますこれの原因は何か？

Answer 1

<Test/>は、関数ではなく、thenコールバック関数によって返されています。非同期操作に基づいて条件付きでレンダリングするため、コンポーネントを正しく更新するには別の方法をとる必要があります。 .then()句を持ってい

import React from 'react'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isOnline: false // set initial state to false 
     }; 
    } 

    componentDidMount() { 
     isOnline().then(online => { 
      this.setState({ 
       isOnline: true; // call setState to update state and rerender App 
      }); 
     }); 
    } 

    render() { // use inline expression to conditionally show <Test/> if isOnline is true 

     return (

      <div className="ui container"> 

       { this.state.isOnline && <Test /> } 

      </div> 
     ); 
    } 
} 

Answer 2

isOnline()ので、私はそれを前提としています

ひとつのアイデアは、それクラス作り、そしてあなたの約束の解決時SETSTATEを呼び出すことにより、ステートフルコンポーネントにあなたのステートレスなコンポーネントを有効にすることです非同期の約束ですか？

これが該当する場合は、それがあなたの犯人です。 Reactは状態が変化したときにレンダリングするだけなので、プロビジョニングが返ってもコンポーネントは再レンダリングされません。

説明する動作を取得するには、状態変数に基づいてテストコンポーネントのレンダリングを行い、約束が戻るときに.then()に設定します。