Question

我即将用ReactiveSearch构建搜索UI，只需要弄清楚如何使用React Router 4和npm包query-string在'/ results'上显示结果。

我在这里做了一个codesandbox

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

基本上我的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 = {{${match.path}?q="${userQuery}"} 替换为 path =“ / results” -结果显示，但不是基于用户查询，它只是默认的ReactiveList行为。

Answer 1

好吧，首先让我们看看您传递给query-string的内容和query-string想要的内容，例如，我们在文本框内输入enter aaa，您传递?q="aaa"但查询字符串要{{1} }

因此，我们可以在查询混乱中删除?q=aaa：

""

请选中此Sandbox

userQuery在<route>中未定义

1 个答案: