Мой список поиска фильтра в реагирует не отображает отфильтрованный список и сталкивается с ошибкой

Question

Это компонент Owner (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;

У меня возникла ошибка при фильтрации ресторана из панели управления владельца.Оператор возврата не возвращает никакого значения и сталкивается с ошибкой.

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

Answer 1

Вы храните поисковый запрос в состоянии, но не используете его при рендеринге FilterRestaurants.

Вы должны отфильтровать их перед отображением.Примерно так:

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

        // ...

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

Кроме того, вы можете сделать это намного проще с React Hooks API , если вы используете 16,8+ React.