Question

我有一个React项目，该项目正在从eBay API中提取数据。我正在从后端Node文件中获取数据。

我已经成功创建了一个搜索输入栏，用于根据用户查询过滤数据。我还想创建一些过滤工具，使用户可以缩小显示项目的范围（例如按价格），以及允许用户按拍卖剩余时间排序的下拉菜单等。对于在哪里以及如何实现此过滤器感到困惑。

我现在有一个“卡”组件，该组件利用挂载时的上下文获取。

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));
  }

“卡片”组件将每个项目映射到一个“卡片”组件中，该组件显示每个单独的项目。

然后，我的“搜索”组件将引用回上下文文件中设置的化简器。

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)}>

我不太了解上下文和约简的内容，而是根据我看过的教程利用了该结构。因此，我认为在这一点上，我不确定要在哪里放置我的过滤机制以及如何实际实现它。例如，它将是一个完全不同的组件，或者我可以以某种方式与我的搜索组件一起包括吗？我确实希望用户能够同时选择多个过滤器，所以这增加了我的困惑。

我想我最初的想法是在我的Cards组件中映射API数据的地方之外，还要实现一个过滤器，那么这是否意味着我应该在我的具有reducer功能的上下文文件中创建一个新Case？对此一点点迷失了。

在React中使用搜索输入创建多个过滤器

0 个答案: