arrays - 反应无法显示过滤列表

Question

我正在构建一个食物列表应用程序，但我一直在显示过滤后的部分。

我有一份每道菜的菜肴和配料清单。成分是食物列表数组中的一个数组。换句话说，成分是一个嵌套数组。

所以我想做的是创建一个搜索栏。当您输入一种成分时，它会显示一个菜肴列表，其中一种成分与搜索栏中的成分相匹配。例如，如果您输入意大利面，您会得到一份可能的菜肴的过滤列表，其中包括意大利面。因此，当用户在搜索栏中键入一种成分时，用户应该会在其成分数组中看到包含该成分的菜肴列表。

这是我的食物清单 json

[
  {
    "food": "Lox and Bagel",
    "ingredients": ["lox", "bagel", "cream cheese"]
  },
  {
    "food": "Sushi",
    "ingredients": ["rice", "salmon"]
  },
  {
    "food": "Spaghetti",
    "ingredients": ["pasta", "tomato sauce"]
  }
]

这是应该显示食物列表的函数。但是，我无法让它显示列表。我想我可能在这个函数的某个地方搞砸了：

showFood = () =>{
    this.props.filtered.map((eachFood, index) => {
      const lc = eachFood.ingredients.map(ingredient => ingredient.toLowerCase());
      const filter = this.state.searchInput.toLowerCase();
      if (eachFood.lc.includes(filter) === -1) {
        return(
          <DishBox
          key={index}
          dish={eachFood.food}
          ingredients={eachFood.ingredients}
          clickToDelete={this.deleteDish.bind(index)}
          />
        );
      }
    });
  }

这是我在 codesandbox 上托管的完整代码的链接。

标签： arraysreactjssearch

Answer 1

您可以像这样按选定的成分过滤菜肴

let selectedIngredient = "pasta";

let dishes = [
  {
    "food": "Lox and Bagel",
    "ingredients": ["lox", "bagel", "cream cheese"]
  },
  {
    "food": "Sushi",
    "ingredients": ["rice", "salmon"]
  },
  {
    "food": "Spaghetti",
    "ingredients": ["pasta", "tomato sauce"]
  }
]

let filteredDishes = dishes.filter(d => d.ingredients.includes(selectedIngredient))

console.log(filteredDishes);

文件App组件

import React, { Component } from "react";
import DishBox from "./components/DishBox/index";
import AddDish from "./components/AddDish/index";
import SearchBox from "./components/SearchBox/index";
import './App.css';
import fooddb from "../src/food-list.json";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: fooddb,
      filtered: fooddb,
      searchInput : ""
    }
  }

  searchChange = (filterText) => {
    this.setState({
      // filtered: newList,
      searchInput: filterText
    });
  }


  addDish = (newDish) => {
    console.log("newdish", newDish);
    newDish.ingredients = newDish.ingredients.split(", ");
    const dishsCopy = [...this.state.list];
    dishsCopy.push(newDish);
    this.setState({
      list: dishsCopy,
      filtered: dishsCopy
    })
  }

  showFood = () =>{
    // return this.state.filtered.map((eachFood,index)=>{
    //     return(
    //     <DishBox
    //     key={index}
    //     dish={eachFood.food}
    //     ingredients={eachFood.ingredients}
    //     clickToDelete={this.deleteDish.bind(index)}
    //       />
    //     )
    // })

    // let currentList = [...this.state.list];
        
    // let newList = currentList.filter(item => {
    //   const lc = item.ingredients.map(ingredient => ingredient.toLowerCase());

    //   const filter = this.state.searchInput.toLowerCase();

    //   return lc.includes(filter);
    // });
    let filteredDishes = [...this.state.filtered]
    const filter = this.state.searchInput.toLowerCase();
    if(filter !== "") {
      
      filteredDishes = filteredDishes.filter(d => d.ingredients.includes(filter))
    }

    return filteredDishes.map((eachFood, index) => {

        return(
          <DishBox
          key={index}
          dish={eachFood.food}
          ingredients={eachFood.ingredients}
          clickToDelete={this.deleteDish.bind(index)}
          />
        );
      // return (<DishBox className="food-item" item={item} key={Math.random()} />)
    });
  }

  deleteDish = (dishIndex) => {
    const dishsCopy = [...this.state.list];
    dishsCopy.splice(dishIndex, 1);
    this.setState({
      list: dishsCopy
    })
  }
 
  render() {
    console.log(this.state.list);
    return (
      <div className="App">
        <header className="App-header">
        <h1>Grand Food Tour</h1>
        </header>
        <div className="food-section">
          <div className="container">
          <SearchBox searchInput={this.state.searchInput} searchChange={this.searchChange}/>
          <div className="food-list">
            {this.showFood()}
          </div>
          <AddDish addDish={this.addDish} />
          {/* {this.state.list.map((onedish, index) => (
                <DishBox
                  key={index}
                  dish={onedish.food}
                  ingredients={onedish.ingredients}
                  clickToDelete={this.deleteDish.bind(index)}
                />
              ))} */}
            </div>
        </div>
      </div>
    );
  }
}

export default App;

文件Dish组件

import React, { Component } from 'react';

export default class DishBox extends Component {
  render() {
    console.log(this.props.dish);
    return (
      <div className="dish-box">
        <div className="food-title"><h2>{this.props.dish}</h2></div>
        <p>{this.props.ingredients.join(", ")}</p>
        <button onClick={this.props.clickToDelete}>Delete</button>
      </div>
    )
  }
}