ロード中にスピナーを表示するためにHOCにデータ取得コンポーネントをラップします。

Question

私はAPIを介してデータをフェッチするさまざまな反応コンポーネントがあり、それぞれに対応するloadDataアクションとisLoadingレデューサーがあります。私は、データがロードされ、コンポーネントが表示されるまで、コンポーネントの代わりにスピンナーをロードすることを示すHOCを記述しようとしています。

isLoading true - > isLoadingはfalseになります - >子コンポーネントはレンダリングされます - > child's componentDidMount（）executed - >これは再びisLoadingをfalseに設定するloadDataアクションを呼び出します。それを防ぐにはloadDataを一度だけ呼び出す方法はありますか？それとももっと洗練されたソリューションがありますか？

class DataList extends Component { 
    componentDidMount() { 
    this.props.loadData(); //action that pulls data via api 
    } 

    render() { 
    return <p>{this.props.data}</p>; 
    } 
} 

const withSpinner = (comp) => (props) => { 
    if (props.isLoading) { 
    return <p>Loading...</p> 
    } else { 
    return <comp {...props} /> 
    } 
} 

export default connect()(withSpinner(DataList)); 

// action that fetches data and updates state 
const loadData =() => { 
    setIsLoading(true); 
    data = await fetchData(); 
    setIsLoading(false); 
} 

Answer 1

さて、あなたはこの問題を解決する可能性が最も簡単な方法の一つは、あなたの状態を維持し、あなたのデータをロードしたときtrueに設定しているどこにdataLoaded値を追加することです。次に、loadDataを呼び出す前に小切手を追加するだけで、追加のロード要求が防止されます。それはこのようになります：あなたはあなたがここに多くのオプションを持っている

Answer 2

の内側にあなたの状態へのアクセス権を持っている場合

class DataList extends Component { 
    componentDidMount() { 
    if (!this.props.dataLoaded) { // call it whatever you want 
     this.props.loadData(); //action that pulls data via api 
    } 
    } 

    render() { 
    return <p>{this.props.data}</p>; 
    } 
} 

const withSpinner = (comp) => (props) => { 
    if (props.isLoading) { 
    return <p>Loading...</p> 
    } else { 
    return <comp {...props} /> 
    } 
} 

export default connect()(withSpinner(DataList)); 

// action that fetches data and updates state 
const loadData =() => { 
    setIsLoading(true); 
    data = await fetchData(); 
    setIsLoading(false); 
    setIsLoaded(true); 
} 

また、あなたもloadData関数の内部でdataLoadedを置くことができます。非常に簡単な解決策は、それが存在しない場合にのみ、データをロードするために、次のようになります。あなたはまた、データがロードされているかどうかを示すことになる状態に新しいフラグを導入することができます

componentDidMount() { 
    if (!this.props.data) { 
    this.props.loadData(); 
    } 
} 

。 その他の解決策は、HOCに直接データをロードすることです。