[英]Why is the 'props.match.params.id' not read by firestoreConnect - 'where' collection query using react.js & redux?
I am trying to filter products by category id using react, redux and firestore. 我正在尝试使用react,redux和firestore按类别ID过滤产品。 I am using firestoreConnect to query the products collection by the selected category id in a Link to statement - props.match.params.id and storing that query as filteredProducts.
我正在使用firestoreConnect通过链接到语句 - props.match.params.id中的所选类别ID查询产品集合,并将该查询存储为filteredProducts。
This param id is not empty when console.log inside the render and firestoreConnect but in the where clause - it is not defined or null. 当render和firestoreConnect中的console.log但在where子句中时,此param id不为空 - 它未定义或为null。 Consequently, the query collection is empty and thus not retrieving any records.
因此,查询集合为空,因此不会检索任何记录。
Any solution will be appreciated. 任何解决方案将不胜感激。
I could output the props.match.params.id inside the firestoreConnect. 我可以在firestoreConnect中输出props.match.params.id。 Also, I have tried to index the firetore collection on firebase website without success.
此外,我试图在firebase网站上索引firetore集合,但没有成功。
Here is what I have in the products listing.js: 以下是我在产品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);`
and here is the list of dependencies in the package.json file 这是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"
What I am trying to achieve is a filtered collection of products by a category id 我想要实现的是按类别ID过滤的产品集合
what I am getting is null or undefined array object 我得到的是null或未定义的数组对象
As you are using the latest version of React Router (v4+), you have to wrap the whole component with the " withRouter " higher-order component. 在使用最新版本的React Router(v4 +)时,必须使用“ withRouter ”高阶组件包装整个组件。 It will pass updated match, location, and history props to the wrapped component whenever it renders.
每当渲染时,它都会将更新的匹配,位置和历史道具传递给包装组件。
At first, you have to import the withRouter. 首先,您必须导入withRouter。
import { withRouter } from "react-router";
Then you have to wrap it with withRouter. 然后你必须用withRouter包装它。
export default withRouter(compose(
connect(mapStateToProps),
firestoreConnect(props => [
{
collection: "products",
where: ["category", "==", props.match.params.id],
storeAs: "filteredProducts"
}
])
)(Listing));
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.