React、Mobx、Firebase条件付きレンダリング

Question

私は基本的な条件付きレンダリングに問題があります。私はからデータを取得していた場合、私はfirebaseに保存されているすべての製品を持っていない場合は、メッセージをレンダリングしようとしている

import { ObservableMap, observable, action, computed } from 'mobx'; 
import fb from '../firebase'; 

class ProductStore { 
    @observable products = []; 

    constructor() { 
    fb.products.on('value', (snapshot) => { 
     this.products = []; 
     snapshot.forEach((child) => { 
     this.products.push({ 
      id: child.key, 
      ...child.val() 
     }); 
     }); 
    }); 
    } 

    @action addProduct = (product) => { 
    fb.products.push(product); 
    } 

    @action removeProduct = (product) => { 
    fb.products.child(product.id).set({}); 
    } 

    @computed get totalProducts() { 
    return this.products.length; 
    } 


} 

const store = new ProductStore(); 
export default store ; 

、およびロード...メッセージ： は基本的に私はこのお店を持っていますfirebaseので、私は、これは今やっている：

const ProductList = (props) => { 

    const renderView =() => { 
    if(props.products.length){ 
     return props.products.map((product,index) => <Product key={index} product={product} removeProduct={props.removeProduct}/>); 
    }else{ 
     return <p>Loading...</p> 
    } 
    } 

    return (
     <div className="product-list"> 
     {console.log(props.products)} 
     {renderView()} 
     </div> 
    ) 
} 

がどのように私はfirebase上の任意のデータを持っていない場合、メッセージ「が見つかりません製品」を印刷することができますか？私は最初に配列に観測可能な製品を初期化し、次にロードメッセージを表示し、その後にデータをロードしますが、firebaseのすべてのデータを削除すると、ロードメッセージが表示されます。

Answer 1

あなただけのisLoadingフィールドであなたのProductStoreを拡張することができます：

class ProductStore { 
    @observable products = []; 
    @observable isLoading = true; 

    constructor() { 
    fb.products.on('value', (snapshot) => { 
     const products = []; 

     snapshot.forEach((child) => { 
     products.push({ 
      id: child.key, 
      ...child.val() 
     }); 
     }); 

    this.products.replace(products); 
    this.isLoading = false; 
    }, (error) => { 
     this.isLoading = false; 
    }); 
    } 

    @action addProduct = (product) => { 
    fb.products.push(product); 
    } 

    @action removeProduct = (product) => { 
    fb.products.child(product.id).set({}); 
    } 

    @computed get totalProducts() { 
    return this.products.length; 
    } 
} 

そして、あなたのビューでproducts.lengthと一緒にこれを使用する：

const ProductList = ({ isLoading, products }) => { 
    let result; 

    if (isLoading) { 
    result = <p>Loading...</p>; 
    } else if (products.length === 0) { 
    result = <p>Products not found</p>; 
    } else { 
    result = products.map((product, index) => <Product key={index} product={product} removeProduct={props.removeProduct}/>); 
    } 

    return (
    <div className="product-list"> 
     {result} 
    </div> 
); 
}