Question

我正在构建一个React应用程序，该应用程序渲染显示本地餐厅的卡片网格。卡片数据存储在JSON文件中，并且卡片按美食类别进行过滤。默认情况下，所有餐厅类别都显示在组件中。

我遇到的问题是第一次选择，例如“亚洲”牌已正确过滤，但在第二个选择上，例如“ American”，数组返回空。

我创建了一个将组件重置为其初始状态的功能，该功能可以按预期工作，并且可以通过单击“所有餐厅”来实现。我知道React会批量更新到状态，因此我无法在过滤新餐厅之前想出一种方法重置为restaurantData对象。

我来自设计背景，对React和JavaScript还是一个新手。我已经尝试在onClick函数以及我的过滤方法中实现串联状态重置，但是没有运气。

import React, { Component } from "react";
import ReactDom from "react-dom";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { Nav } from "react-bootstrap";
import RestaurantList from "../components/RestaurantList";
import restaurants from "../data/restaurantData.json";


const INITIAL_STATE = {
  restaurants: restaurants
}

class Restaurants extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        restaurants: [],
    };
  }

  componentDidMount() {
    this.setState(() => ({ restaurants: restaurants}));

}

render() {    
  let restaurants = this.state.restaurants;

let onResetArray = () => {
  this.setState({ ...INITIAL_STATE });
  console.log(restaurants)
}

let filterMexican = () => {
  const mexicanRestaurants = restaurants.filter( restaurant => restaurant.category === "mexican");
  this.setState({restaurants: mexicanRestaurants});
  console.log(mexicanRestaurants);
}

let filterBreakfast = () => {
  const breakfastRestaurants = restaurants.filter( restaurant => restaurant.category === "breakfast");
  this.setState({restaurants: breakfastRestaurants});
  console.log(breakfastRestaurants);
}

let filterAsian = () => {
    const asianRestaurants = restaurants.filter( restaurant => restaurant.category === "asian");
    this.setState({restaurants: asianRestaurants});
    console.log(asianRestaurants);
}

let filterAmerican = () => {
  const americanRestaurants = restaurants.filter( restaurant => restaurant.category === "american");
  this.setState({restaurants: americanRestaurants});
  console.log(americanRestaurants);
}



     return (
       <div>
         <Navbar />
         <div className="container-fluid my-4">
           <h1 className="page-title my-4">Restaurants</h1>
           <Nav
             className="justify-content-center mb-4"
             variant="pills"
             defaultActiveKey="restaurants"
           >
             <Nav.Item>
               <Nav.Link eventKey="restaurants" onClick={onResetArray}>
                 All Restaurants
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
               <Nav.Link
                 eventKey="mexican-restaurants"
                 id="mexican-button"
                 onClick={ () => { onResetArray(restaurants); filterMexican() } }
               >
                 Mexican
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
               <Nav.Link
                 eventKey="asian-restaurants"
                 onClick={ () => { onResetArray(restaurants); filterAsian() }}
               >
                 Asian
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
               <Nav.Link
                 eventKey="american-restaurants"
                 onClick={filterAmerican}
               >
                 American
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
               <Nav.Link
                 eventKey="breakfast-restaurants"
                 onClick={filterBreakfast}
               >
                 Breakfast
               </Nav.Link>
             </Nav.Item>
           </Nav>

           <RestaurantList restaurants={this.state.restaurants} />

         </div>
         <Footer />
       </div>
     );
  }
}

export default Restaurants;

Answer 1

对全局变量和局部变量使用不同的名称。并相应地更改代码。

import allRestaurants from "../data/restaurantData.json";

在React.js中的数组上使用filter（）后，如何重置为初始状态？

1 个答案: