Question

我在React中有一个名为ShowArticle的组件，我正在尝试通过名为slug的字符串字段在我的Firestore集合中的articles中查询一个文档。我的网址为//myhost.com/article/show/:slug，其中slug是Firestore中匹配的唯一字符串。

我的路线如下：

<Route exact path="/article/show/:slug" component={ShowArticle} />

因此，我可以在:slug组件中使用const { slug } = props.match.params;正确获取ShowArticle参数。

当我查询Firestore中存在于数据库中的块时，我没有收到来自Firestore的数据。

如何通过SEF URL的唯一字符串值检索文章文档？

我的ShowArticle组件如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { firestoreConnect } from 'react-redux-firebase';
import { PropTypes } from 'prop-types';
import Article from "./Article";

class ShowArticle extends Component {
  render() {
    const { article } = this.props;
    if (article) {
      return (
        <div>
          <Article
            key={article.id}
            title={article.title}
            date={article.date}
            body={article.body}
          />
        </div>
      );
    } else {
      return (
        <div>Loading...</div>
      )
    }
  }
}

ShowArticle.propTypes = {
  firestore: PropTypes.object.isRequired
};

export default compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', doc: slug }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle);

Answer 1

在firestoreConnect()的回调中，将doc: slug更改为queryParams: [ 'equalTo=' + slug ]

所以您最终会得到：

export default compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', queryParams: [ 'equalTo=' + slug ] }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle);

文档中关于react-redux-firebase软件包的参考http://react-redux-firebase.com/docs/queries.html#notParsed。

Answer 2

很可能您正在使用最新版本的React Router（v4 +）。因为在较旧的React Router中，这是使ID与道具一起可用的方法。但是在更新的react-router库中，您必须使用“ withRouter”高阶组件包装整个组件。每当渲染时，它将更新的匹配，位置和历史道具传递给包装的组件。

首先，您必须导入withRouter。

import { withRouter } from "react-router";

然后，您必须将其与Router一起包装。

 export default withRouter(compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', doc: slug }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle))

这对我来说就像一个魅力！

如何查询Firestore以按字符串字段获取文档（搜索引擎友好的子弹）

2 个答案: