Состояние mapStateToProps возвращает «неопределенное» два раза перед извлечением данных из firebase

Question

Компонент не получает данные из Firebase до его монтирования.

const mapStateToProps = (state, ownProps) => {
  return {
    products: state.firestore.ordered.products
  };
};

, когда я проверяю реквизиты после того, как он монтируется ...

componentDidMount() {
    console.log(this.props);
}

Значение этого.props.product не определен.

---

Если я console.log с параметром состояния внутри mapStateToProps (), я сразу получаю два console.logs из undefined, и через некоторое время я получаю фактический массив, который мне нужен.

const mapStateToProps = (state, ownProps) => {
  const products2 = state.firestore.ordered.products;

  console.log(products2);  //returns 2 console logs of undefined,
  // after a second (after the component mounts) it gives me the data

  return {
    products: state.firestore.ordered.products
  };
};

---

Причина, по которой это проблема, заключается в том, что я хочу визуализировать компонент, используя данные из Firebase.

<div className="item-render-space">
          {products
            .filter(
              eachProduct =>
                eachProduct.landingPageCategory.indexOf(this.props.category) >
                -1
            )
            .map(eachProduct => (
              <div className="each-product" key={eachProduct.id}>
                <Link to={"/product/" + eachProduct.id}>
                  <img src={eachProduct.image} alt="#" />
                  <p className="product-price">{eachProduct.price}</p>
                  <p className="product-name">
                    {nameShortener(eachProduct.name)}
                  </p>
                </Link>
              </div>
            ))}
        </div>

Я получаю экран ошибки, потому чтопеременная "products" не определена, потому что данные из базы данных еще не достигли компонента, когда он начал рендеринг.

Как решить эту проблему?!

EDIT: Вот rootReducer:

const rootReducer = combineReducers({
  firestore: firestoreReducer, //connects to firestore
  live: liveReducer, //used locally for opening bootstrap modals
  products: productsReducer, //previous products store before implementing Firestore
  firebase: firebaseReducer //connects to firebase
});

Answer 1

Попробуйте использовать условный рендеринг , чтобы не пытаться выполнить Array.prototype.filter () и Array.prototype.map () в undefined. Следующее проверяет, является ли products правдивым и имеет length больше 0:

<div className="item-render-space">
  {products && products.length > 0 && products
    .filter(
      eachProduct =>
        eachProduct.landingPageCategory.indexOf(this.props.category) >
        -1
    )
    .map(eachProduct => (
      <div className="each-product" key={eachProduct.id}>
        <Link to={"/product/" + eachProduct.id}>
          <img src={eachProduct.image} alt="#" />
          <p className="product-price">{eachProduct.price}</p>
          <p className="product-name">
            {nameShortener(eachProduct.name)}
          </p>
        </Link>
      </div>
    ))}
</div>

Надеюсь, это поможет!