コールバック関数からの戻り値がテキストを設定しない

Question

ユーザがonlineかofflineかどうかを知りたい。そこで、私はクラスからisOnlineという名前の関数をエクスポートしました。

export const isOnline = (callback) => { 
    NetInfo.isConnected.fetch() 
      .then(result => { 
       callback(null, result); 
      }).catch(err => { 
       callback(err); 
      }); 
}; 

isOnline機能がbooleanを返します。ここでは

は私isOnline関数を定義する方法です。

今、コンポーネントで使用します。そこで、私は次のように使ってみました：

render() { 
    return (
     <Text>{ 
      isOnline((err, result) => { 
       console.log(err); 
       console.log(result); 
       return result ? 'Online' : 'Offline'; 
      }) 
     }</Text> 
    ); 
} 

私はerrとresultオブジェクトも記録しました。それらの値は次のとおりです：

私はオンラインまたはオフラインの画面が表示されます。しかし、私はテキストが表示されません。私は私の帰りの声明に何か間違っていることを知っています。しかし、私は何を知りません。誰か助けてくれますか？

Answer 1

あなたがより良い状態でオンライン/オフラインの文字列を配置し、例えばcomponentDidMount

でそれを更新します。

class MyComponent extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      text: '' 
     } 
    } 

    componentDidMount() { 
     isOnline((err, result) => { 
      this.setState({ 
       text: result ? 'Online' : 'Offline'  
      }); 
     }) 
    } 

    render() { 
     return (
      <Text>{ 
       this.state.text 
      }</Text> 
     ); 
    } 

} 

Answer 2

あなたの関数は、コールバックを実行しますが、実際にはブール値を返しません。このようなアプローチを試すことができます：