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获取数据，那么我现在正在这样做：< / p>

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

您可以使用ProductStore字段扩展isLoading：

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条件渲染

2 个答案: