ReactiveList не будет отображать результаты поиска через React Router - PullRequest
Новая
       6

ReactiveList не будет отображать результаты поиска через React Router

0 голосов
/ 09 ноября 2018

Я пытаюсь получить ReactiveList (из библиотеки пользовательского интерфейса ReactiveSearch) для отображения результатов поиска через React Router 4. Я использую строку запроса из npm, чтобы получить значение? Q =, или, по крайней мере, я так думаю ... Вот код кодов .

В search-layout.js, если я просто отображаю <Results />, ReactiveList отображает весь индекс, а не результаты, основанные на запросах. Если я выполняю рендеринг с использованием <Route ... />, то ничего не отображается - и я не уверен, структурировано ли приложение так, как если бы я не делал то, что мне нужно от React. 

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

  componentDidMount(value) {
    // console.log("vvv" + value);
    this.setState({ value: this.state.value });
    // const parseUrl = queryString.parseUrl(this.props.location)
    const fixedQuery = this.props.location.search.replace(/['"]+/g, "");
    const userQuery = queryString.parse(fixedQuery);
    // console.log(JSON.stringify(userQuery.q));
    // this.setState({ userQuery: userQuery.q });
    // 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}`}
          render={props => <Search {...props} />}
        />
        {/* <Route path={`${match.path}?q=${userQuery}`} component={Results} /> */}
        {match.path}
        <br />
        {match.url}
        <br />
        {`{match.path}?q="${userQuery}"`}
        {/* <Results /> */}
      </div>
...