如何将过滤器值作为状态的一部分传递，并作为道具返回，从而过滤掉某些项目？

Question

截至目前，我已经列出了大约40家杂货店的菜单项，并且我只能选择一次显示所有40家商店。我正在尝试通过使用下拉菜单来实现过滤器，在该菜单中您选择商店的名称，并且仅显示具有该名称的商店。这是我在名为“ MenuComponent.js”的文件中过滤器的代码：

class FilterForm extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(values) {
    console.log(values.filter);
  }

  render() {
    return(
      <LocalForm onSubmit={(values) => this.handleSubmit(values)}>
        <Control.select model=".filter" id="filter" name="filter" className="form-control">
          <option value="Safeway">Safeway</option>
          <option value="Whole Foods">Whole Foods</option>
          <option value="Luckys">Luckys</option>
          <option value="Sprouts">Sprouts</option>
        </Control.select>
        <Row className="form-group">
            <Col md={{size: 10, offset: 2}}>
                <Button type="submit" color="primary">
                    Filter
                </Button>
            </Col>
        </Row>
      </LocalForm>
    );
  };
}

作为该文件的一部分，我具有实际的菜单组件，也位于'MenuComponent.js'中：

const Menu = (props) => {
    const menu = props.dishes.dishes.map((dish) => {
      return (
        <div key={dish.id} className="col-12 col-md-5 m-1">
            <RenderMenuItem dish={dish} comments={props.comments.comments.filter((comments) => comments.dishId === dish.id)} />
        </div>
      );
  });

  if (props.dishes.isLoading) {
    return(
      <div className="container">
        <div className="row">
          <Loading />
        </div>
      </div>
    );
  }
  else if (props.dishes.errMess) {
    return(
      <div className="container">
        <div className="row">
          <h4>{props.dishes.errMess}</h4>
        </div>
      </div>
    );
  }
  else
    return (
      <div className="container">
        <div className="row">
          <div className="col-12">
            <h3>STORES</h3>
            <FilterForm />
            <hr />
          </div>
        </div>
        <div className="row">
          {menu}
        </div>
      </div>
    );
}

export default Menu;

我正在为values.filter获取正确的值。我的问题是我该如何忽略此values.filter并重新呈现我的Menu项，以便仅显示在dish.name === values.filter的项。

父组件位于名为“ MainComponent.js”的文件中，看起来像这样：

return (
        <div id="MainDiv">
            <Header />
                <TransitionGroup>
                    <CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
                        <Switch>
                            <Route path="/home" component={HomePage} />
                            <Route exact path="/aboutus" component={AboutPage} />
                            <Route exact path="/menu" component={() => <Menu dishes={this.props.dishes} comments={this.props.comments} />} />
                            <Route path="/menu/:dishId" component={DishWithId} />
                            <Route exact path="/contactus" component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm}
                                    postFeedback={this.props.postFeedback} />} />
                            <Redirect to="/home" />
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
          <Footer />
        </div>
    );

这是我映射状态并将其分发到道具的位置：

const mapStateToProps = state => {
    return {
        dishes: state.dishes,
        comments: state.comments,
        promotions: state.promotions,
        leaders: state.leaders
    }
}

const mapDispatchToProps = (dispatch) => ({
    postComment: (dishId, rating, author, comment, masks, carts, sanitizer, monitor, oneway, register, card, numcust, gloves, curb, delivery) => dispatch(postComment(dishId, rating, author, comment, masks, carts, sanitizer, monitor, oneway, register, card, numcust, gloves, curb, delivery)),
    fetchDishes: () => {dispatch(fetchDishes())},
    resetFeedbackForm: () => { dispatch(actions.reset('feedback'))},
    fetchComments: () => {dispatch(fetchComments())},
    fetchPromos: () => {dispatch(fetchPromos())},
    fetchLeaders: () => {dispatch(fetchLeaders())},
    postFeedback: (firstname, lastname, telnum, email, agree, contactType, message) => dispatch(postFeedback(firstname, lastname, telnum, email, agree, contactType, message))
});

Answer 1

因为菜单是功能组件，所以您可以使用useState挂钩。

const Menu = (props) => {
  const [filter, setFilter] = useState(null);
  ...
  // then pass the function to FilterForm
  <h3>STORES</h3>
    <FilterForm setFilter={setFilter} />
  <hr />

将setFilter添加到FilterForm onSubmit

handleSubmit(values) {
  console.log(values.filter);
  this.props.setFilter(values.filter);
}

现在我们在菜单中有了该值

const Menu = (props) => {
  const [filter, setFilter] = useState(null);
  let dishes = props.dishes.dishes;
  if(filter !== null){
    dishes = dishes.filter((dish) => dish.storeName === filter);
  }
  const menu = dishes.map((dish) => {
    return (
      <div key={dish.id} className="col-12 col-md-5 m-1">
          <RenderMenuItem dish={dish} comments={props.comments.comments.filter((comments) => comments.dishId === dish.id)} />
      </div>
    );
  });

我希望这会有所帮助！