Question

这是所有者组件（Owner.js），在这里我实现了一个搜索过滤器，该过滤器应显示与搜索中相同名称的餐厅。但是，当我尝试使用餐厅并实施过滤器搜索时，会出错。我应该从所有者仪表板中现有的餐厅列表中获取餐厅列表。

import React, { Component } from "react";
import Restaurant from "../customer/Restaurant";

export default class Owner extends Component {
  constructor() {
    super();
    this.state = {
      search: ""
    };
  }
  updateSearch(event) {
    this.setState({
      search: event.target.value.substr(0, 25)
    });
  }
  render() {
    let filteredRestaurants = this.props.restaurants;

    return (
      <div>
        <h1> Welcome Owner </h1> <br />
        <ul>
          {" "}
          {filteredRestaurants.map(res => {
            return <restaurants res={<Restaurant />} key={res.name} />;
          })}
        </ul>{" "}
        <input
          type="text"
          Value={this.state.search}
          onChange={this.updateSearch.bind(this)}
        />{" "}
        <Restaurant />
      </div>
    );
  }
}

这是Restaurant.js，它显示Owner.js中的餐厅详细信息。

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getRestaurant } from "../../actions/getRestaurants";

export class Restaurant extends Component {
  static propTypes = {
    // restaurants: PropTypes.array.isRequired,
    getRestaurantName: PropTypes.func
  };

  componentDidMount() {
    this.props.getRestaurant();
  }

  render() {
    const contentKeys = Object.keys(this.props.restaurants);
    // console.log(JSON.parse(this.props.restaurants))
    return (
      <div className="row">
        {contentKeys.map(t =>
          [this.props.restaurants[t]].map(res => (
            <div className="col-md">
              <div className="card" style={cardWidth}>
                <img className="card-img-top" src="..." alt="Card image cap" />
                <div className="card-body">
                  <h5 className="card-title">{res.Name}</h5>
                  <p className="card-text">
                    <h6>{res.Address}</h6>
                    <h6>{res.City}</h6>
                    <h6>{res.zipcode}</h6>
                    <h6>Open:{res.Hours.Open}</h6>
                    <h6>Close:{res.Hours.Close}</h6>
                  </p>
                  <a href="#" className="btn btn-primary">
                    Go somewhere
                  </a>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    );
  }
}

const cardWidth = {
  width: "18rem"
};

const mapStateToProps = state => ({
  restaurants: state.restaurantReducer.restaurants
});

export default connect(
  mapStateToProps,
  { getRestaurant }
)(Restaurant);
//export default  Restaurant;

从所有者仪表板过滤餐馆时出现错误。由于return语句不返回任何值，因此会出错。

{filteredRestaurants.map(res => {
            return <restaurants res={<Restaurant />} key={res.name} />;
          })}

Answer 1

您正在以某种状态存储搜索查询，但是在呈现过滤后的餐厅时不要使用它。

您应在映射之前过滤它们。像这样：

        const filteredRestaurants = this.props.restaurants.filter(res => res.name.includes(this.state.search);

        // ...

        filteredRestaurants.map(res => <Restaurant key={res.name} />)

此外，如果您使用的是16.8+ React，则可以使用React Hooks API使其更加容易。

我在react中的过滤器搜索列表未显示过滤后的列表并遇到错误

1 个答案: