コールバックでアクションをディスパッチ

Question

レスキューネイティブで作業を開始しました。問題が発生しました。私はdispatchingアクションで、onLoadStartの画像コンポーネントの機能でコールバックが発砲しています。そのアクションが呼び出され、表示されます。Loading...画面上では、しかし、私はdispatchingのonLoadEndで何も起こらない(callback loadEnd is not fired, app looks like frozen)。両方の場所でconsole.logを使用すると、コードは正常に動作しています。誰かが私に何が間違っているのか教えてもらえますか？

class DisplayImage extends Component { 

    loadStart() { 
     this.props.iLoadingFunction(true); 
    } 
    loadEnd() { // <- this function is not fired 
     this.props.iLoadingFunction(false); 
    } 

    render() { 
     if (this.props.isLoading) { 
      return <Text>Loading…</Text>; 
     } 
     return (
      <View> 
       <Image 
       source={{uri: 'https://test.com/image'}} 
       onLoadStart={this.loadStart.bind(this)} 
       onLoadEnd={this.loadEnd.bind(this)} 
       /> 
      </View> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     isLoading: state.isLoading 
    }; 
}; 
const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ iLoadingFunction }, dispatch); 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(DisplayImage); 

アクションと減速

export function iLoadingFunction(bool) { 
    return { 
     type: 'IS_LOADING', 
     isLoading: bool 
    }; 
} 

export function iLoadingFunction(state = false, action) { 
    switch (action.type) { 
     case 'IS_LOADING': 
      return action.isLoading; 
     default: 
      return state; 
    } 
} 

Answer 1

私は問題はアクションとレンダリングが中に発生していることを順序から来ていると思うのは、render機能を見てみましょう：。

render() { 
    if (this.props.isLoading) { 
     return <Text>Loading…</Text>; 
    } 
    return (
     <View> 
      <Image 
      source={{uri: 'https://test.com/image'}} 
      onLoadStart={this.loadStart.bind(this)} 
      onLoadEnd={this.loadEnd.bind(this)} 
      /> 
     </View> 
    ); 
} 

最初コンポーネントがマウントされる時刻this.props.isLoadingはfalseであるため、コンポーネントレンダリング

<View> 
    <Image 
     source={{uri: 'https://test.com/image'}} 
     onLoadStart={this.loadStart.bind(this)} 
     onLoadEnd={this.loadEnd.bind(this)} 
    /> 
</View> 

Imageマウントは、イメージのロードを開始し、this.props.iLoadingFunction(true)をディスパッチします。

この時点で、店舗内の更新は、コンポーネントの再レンダリングをトリガーします。コンポーネントは今、元Imageが階層から削除されました

<Text>Loading…</Text> 

をレンダリングするように、この時間this.props.isLoadingは本当です。画像をダウンロードし続けるかどうかは確かではありませんが、処理することを期待しているコンポーネントが削除されたため、onLoadEndハンドラは起動しません。

は、この問題を回避するために、私は `IS_LOADING`が正常に動作している階層内 Imageを残すだけ含めるか Textそう

render() { 
    return (
     <View> 
      { this.props.isLoading && <Text>Loading…</Text> } 
      <Image 
      source={{uri: 'https://test.com/image'}} 
      onLoadStart={this.loadStart.bind(this)} 
      onLoadEnd={this.loadEnd.bind(this)} 
      /> 
     </View> 
    ); 
}