userQuery не определен в <Route /> - PullRequest
Новая
       10

userQuery не определен в <Route />

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

Я только что завершил создание своего пользовательского интерфейса поиска с помощью ReactiveSearch, и мне просто нужно выяснить, как отображать результаты в '/ results' с помощью React Router 4 и строки запроса пакета npm.

Я сделал коды и поле здесь

Мой вопрос: почему 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;

Компонент Results, который <Route /> рендерит, содержит компонент ReactiveList. Я знаю, что <Results /> работает и отображает информацию, потому что у меня изначально был React-рендеринг, просто чтобы убедиться, что она работает Сейчас я пытаюсь интегрировать RR4 и пакет строки запроса и не знаю, где я ошибаюсь.

Если я заменим path = {${match.path}?q="${userQuery}"} на path = "/ results" - отображение результатов, но не на основе запроса пользователя, это просто поведение ReactiveList по умолчанию.

1 Ответ

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

Хорошо, сначала давайте посмотрим, что вы передаете 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));

пожалуйста, отметьте это Песочница

...