Создание нескольких фильтров с вводом поиска в React - PullRequest
Новая
       12

Создание нескольких фильтров с вводом поиска в React

0 голосов
/ 11 октября 2019

У меня есть проект React, который извлекает данные из eBay API. Я получаю данные из файлов своего внутреннего узла.

Я успешно создал панель ввода для поиска, которая фильтрует данные на основе пользовательского запроса. Я также хотел бы создать несколько инструментов фильтрации, которые позволяют пользователю сузить отображаемые элементы, например, по цене, а также раскрывающийся список, который позволяет пользователю сортировать время, оставшееся на аукционе и т. Д. о том, где и как реализовать этот фильтр.

Теперь у меня есть один компонент 'Cards', который использует выборку контекста при монтировании.

Cards.js 

import { Consumer } from "../../context";
 {card_list.map(item => (
                  <Card key={item.id} card={item} />
                ))}

Context.js 

const reducer = (state, action) => {
  switch (action.type) {
    case "SEARCH_CARDS":
      return {
        ...state,
        card_list: action.payload,
        heading: "Search Results"
      };

    default:
      return state;
  }
};

export class Provider extends Component {
  state = {
    card_list: [
      { item: { title: "abc" } },
      { item: { title: "bxc" } }
    ],
    query: "fun stuff",
    heading: "Funnest STUFF EVER",
    filter: {},
    dispatch: action => this.setState(state => reducer(state, action))
  };

  componentDidMount() {
    fetch(`http://localhost:9000/mwBase?keyword=${this.state.query}`)
      .then(res => res.json())
      .then(res => this.setState({ card_list: res }))
      .then(res => console.log(res))
      .catch(err => console.log(err));
  }

Компонент Cards отображает каждый элемент в компонент «Card», который отображает каждый отдельный элемент.

Затем мой компонент «Search» ссылается наредуктор, установленный в моем файле контекста. 

class Search extends Component {
  state = {
    query: ""
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  findCards = (dispatch, e) => {
    e.preventDefault();

    fetch(
      `http://localhost:9000/mwBase?keyword=${this.state.query}&"-rp -reprint"`
    )
      .then(res => res.json())
      .then(res =>
        dispatch({
          type: "SEARCH_CARDS",
          payload: res
        })
      )
      .then(res => console.log(res))
      .catch(err => console.log(err));
  };


  render() {
    return (
      <Consumer>
        {value => {
          const { dispatch } = value;
          return (
            <div className="card card-body mb-4 p-4">
              <h1 className="display-4 text-center">
                <i>></i> Test Search
              </h1>
              <p className="lead text-center">
                Test Project
              </p>
              <form onSubmit={this.findCards.bind(this, dispatch)}>

Я не очень хорошо понимаю контекст и редуктор и использовал структуру, основанную на уроке, который я смотрел. Таким образом, я думаю, что на данный момент я не совсем уверен, где разместить мой механизм фильтрации и как на самом деле его реализовать. Например, это будет совершенно другой компонент, или я могу каким-то образом включить его вместе с моим компонентом поиска? Я хочу, чтобы пользователь мог выбирать несколько фильтров одновременно, так что это добавляет моей путаницы.

Я предполагаю, что мои первоначальные мысли состоят в том, чтобы внедрить фильтр в дополнение к тому, где я отображаю данные APIв моем компоненте Cards, значит ли это, что я должен создать новый Case в моем контекстном файле, где у меня есть функция редуктора? Просто немного потерян на этом.

...