Как я могу условно отобразить результаты поиска с ReactiveBase - PullRequest
Новая
       39

Как я могу условно отобразить результаты поиска с ReactiveBase

0 голосов
/ 19 декабря 2018

Я пытаюсь условно визуализировать свой компонент Results из ReactiveBase , но каждый раз, когда я пытаюсь использовать троичный оператор, это прерывает рендеринг.Если я удаляю троицу, отображаются результаты.

Я использую компонент <ReactiveList> для отображения результатов в моем компоненте Results.

Я хочу, чтобы результаты отображались только в том случае, если у пользователя есть ACTUALLYотправил поисковый запрос.Так как я могу условно визуализировать компонент Results из ТОЛЬКО после того, как пользователь отправил запрос

Вот мой код: 

import React, { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';

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

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      loading: false,
    };
  }

  render() {
    const { pathname } = this.props;
    const { value, loading } = this.state;

    const { redirect } = this.state;
    if (redirect ) {
      return (
        <Redirect
          to={{
            pathname: '/search',
            search: `?q="${value}"`,
          }}
        />
      );
    }

    return (
      <ReactiveBase
        ...>
          <DataSearch
            ...
            />
          { pathname === '/results'
            ? <Results />
          : null
          }
        </ReactiveBase>
    );
  }
}

export default withRouter(SearchContainer);

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Все, к чему это привело, - это поместить другой элемент состояния и обновить его с помощью componentDidMount 

this.state = {
   ...
   loading: true,
 };


componentDidMount() {
 const { location } = this.props;
 this.setState({ loading: false });
}

, а затем после render () 

const { loading } = this.state;

и затем условного 

{ loading === false && location.pathname === '/results'
   ? <Route path="/results" component={Results} />
   : null }

Вы также можете просто визуализировать компонент <Results /> вместо использования RR4- <Route /> - я пробовал оба - они оба прекрасно работают.

0 голосов
/ 19 декабря 2018

Рассматривали ли вы использование React-Router?Или вы можете использовать состояние, не полагаясь на пути.

Например: 

render() {
  const { results } = this.state;
  if (results || results.length === 0) {
    return (<ReactiveBase>...</ReactiveBase>);
  } else {
    return (<ReactiveBase><Results /></ReactiveBase>);
  }
}
...