1

我刚刚使用 ReactiveSearch 构建了我的搜索 UI，只需要弄清楚如何使用 React Router 4 和 npm 包查询字符串在“/results”上显示结果。

我在这里做了一个codesandbox

我的问题是为什么userQuery未定义？我以为我正确地遵循了这个？

基本上我的 search-layout.js 是这样的：

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import querystring from 'query-string';

import Results from '../components/search/Results';

class SearchLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  componentDidMount(value) {
    this.setState({ value: this.state.value });
    console.log('This is the value: ', value);
    const userQuery = querystring.parse(this.props.location.search);
    // this.setState({ userQuery: this.state.userQuery });
    console.log('This is from query-string: ', userQuery);
  }

  render() {
    const { value } = this.state;
    console.log('This is value: ', value);
    const { userQuery } = this.state; // query string
    console.log('This is the userQuery: ', userQuery);
    const { match } = this.props; // path
    console.log('This is match props: ', match);

    return (
      <div>
        <Route path={`${match.path}?q=${userQuery}`} component={Results} />
        {this.state.value}
        {match.path}
        <br />
        {match.url}
        <br />
        {/* <Results /> */}
      </div>
    );
  }
}

export default SearchLayout;

<Route />正在呈现的 Results 组件包含 ReactiveList 组件。我知道<Results />有效并显示信息，因为我最初只是让 React 渲染它 - 只是为了确保它有效。现在我正在尝试集成 RR4 和查询字符串包，但不确定我哪里出错了。

如果我用 path="/results" 替换path = { ${match.path}?q="${userQuery}"} - 结果显示，但不是基于用户查询，它只是默认的 ReactiveList 行为。

4

1 回答 1

0

好的，首先让我们看看你传递给query-string什么和query-string想要什么，例如我们传递在你传递的文本框中输入 aaa?q="aaa"但查询字符串想要?q=aaa

所以让我们删除""查询搅拌：

 const fixedQuery = this.props.location.search.replace(/['"]+/g, "");
 console.log(fixedQuery );
 const userQuery = querystring.parse(fixedQuery );
 console.log(JSON.stringify(userQuery));
 console.log(JSON.stringify(userQuery.q));

请检查此沙箱

于 2018-11-07T21:44:42.670 回答