React、Mobx、Firebase 条件渲染

Question

我对基本条件渲染有疑问。基本上我有这个商店：

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 上存储任何产品，我会尝试呈现一条消息，如果我从 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 上没有任何数据，我如何打印消息 "products not found"？因为一开始我将可观察到的产品初始化为一个数组，然后反应显示加载消息，然后它加载数据，但是如果我删除 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>  
  );
}

Answer 2

如果您使用 firestore，另一种选择是 Firestorter 库：https://github.com/IjzerenHein/firestorter，其中有 'isLoading'、'isActive' 和 'ready' 可供您使用。

您可能不想重新设计来执行此操作，但其他人可能会觉得它很有趣。

React、Mobx、Firebase 条件渲染

React, Mobx, Firebase conditional rendering

javascript

firebase

ecmascript-6

reactjs

mobx