為什么firestoreConnect不讀取'props.match.params.id' - 'where'使用react.js和redux的集合查詢？

Question

我正在嘗試使用react，redux和firestore按類別ID過濾產品。 我正在使用firestoreConnect通過鏈接到語句 - props.match.params.id中的所選類別ID查詢產品集合，並將該查詢存儲為filteredProducts。

當render和firestoreConnect中的console.log但在where子句中時，此param id不為空 - 它未定義或為null。 因此，查詢集合為空，因此不會檢索任何記錄。

任何解決方案將不勝感激。

我可以在firestoreConnect中輸出props.match.params.id。 此外，我試圖在firebase網站上索引firetore集合，但沒有成功。

以下是我在產品listing.js中的內容：

import React, { Component } from "react";
import { compose } from "redux";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";

class Listing extends Component {
  render() {
    console.log(this.props.match.params.id); // able to log
    const { filteredProducts } = this.props;
    return (
      <div>
        {filteredProducts && filteredProducts.length > 0 ? (
        <ul>
           {filteredProducts.map(product => (
              <li>{product.name}</li>
            ))}
        </ul>
      ) : (
         <div>no products matching criteria </div>
       )}
      </div>
   );
 }
}

const mapStateToProps = ({ firestore: { ordered } }) => ({
  filteredProducts: ordered.filteredProducts
});

export default compose(
  connect(mapStateToProps),
  firestoreConnect(props => [
    {
      collection: "products",
      where: ["category", "==", props.match.params.id], 
      storeAs: "filteredProducts"
    }
  ])
)(Listing);`

這是package.json文件中的依賴項列表

"firebase": "^5.11.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-redux-firebase": "^2.2.6",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.1",
"redux": "^4.0.1",
"redux-firestore": "^0.6.4",
"redux-thunk": "^2.3.0"

我想要實現的是按類別ID過濾的產品集合

我得到的是null或未定義的數組對象

Answer 1

在使用最新版本的React Router（v4 +）時，必須使用“ withRouter ”高階組件包裝整個組件。 每當渲染時，它都會將更新的匹配，位置和歷史道具傳遞給包裝組件。

首先，您必須導入withRouter。

import { withRouter } from "react-router";

然后你必須用withRouter包裝它。

export default withRouter(compose(
    connect(mapStateToProps),
    firestoreConnect(props => [
      {
        collection: "products",
        where: ["category", "==", props.match.params.id], 
        storeAs: "filteredProducts"
      }
    ])
  )(Listing));

希望這可以幫助。