Javascript 反应-条件/消息

我有下面的代码，需要添加两个额外的东西，但我卡住了，不知道怎么做

我需要补充：

• 如果类别a中没有产品，NotFound组件将显示一条消息

• 通过在输入中键入“all”，我们应该能够再次看到所有类别的整个产品列表

理想情况下，我正在寻找最简单的解决方案，因为我目前正在学习React。谢谢

主要部件

import React from 'react';
import Item from './components/Item';

class App extends React.Component {

  state = {
    items: [
      {
        title: "The Spice Girls",
        price: 10,
        category: "Pop",
        quantity: 1,
      },
      { 
        title: "Beethoven",
        price: 5,
        category: "Classical", 
        quantity: 1,
      },
      {
        title: "Bob Marley",
        price: 15,
        category: "Reggae",
        quantity: 1,
      }
    ],
    category: " ",
    filtered: [],  
  }

  handleChange = e => {
    this.setState({category: e.target.value},()=>console.log(this.state.category));
  }

  handleClick = (event) => {
    event.preventDefault()

    var newList = this.state.items;
    var filteredItems = newList.filter(item => item.category === this.state.category)
    this.setState({filtered: filteredItems})
  }

  render () {
    let show;

    if(this.state.category !== " "){
    show = this.state.filtered.map((item, i) => <Item key = {i} cd={item}/>)
        
    }else{
    show = this.state.items.map( (item,i) => <Item key = {i} cd={item}/>)
   }


    return (
      <div>
        <h1 className = "title">CD</h1>
        <h2>Search music below:</h2>
        <form>
            Music style: <input onChange = {this.handleChange}></input>
            <button onClick = {this.handleClick}>Search</button>
         </form>
        {show}
      </div>
    )
  }
}

export default App;

import React from 'react';

class Item extends React.Component {

    render () {
        return (
            <div className = "items"> 
                 <div className = "item">
                    <h3>{this.props.cd.title}</h3>                    
                    <div className = "price">Price: {this.props.cd.price}€</div>
                    <div className = "quantity">Quantity: {this.props.cd.quantity}</div>
                    <div className = "category">Category: {this.props.cd.category}</div>
                  </div>
            </div>
        )
    }
}  
 
export default Item;

从“React”导入React；
从“./components/Item”导入项目；
类应用程序扩展了React.Component{
状态={
项目：[
{
标题：“辣妹”，
价格:10,，
类别：“流行音乐”，
数量：1，
},
{ 
标题：“贝多芬”，
价格:5,，
类别：“古典”，
数量：1，
},
{
标题：“鲍勃·马利”，
价格:15,，
类别：“雷鬼”，
数量：1，
}
],
类别：“，
已筛选：[]，
}
handleChange=e=>{
this.setState（{category:e.target.value}，（）=>console.log（this.state.category））；
}
handleClick=（事件）=>{
event.preventDefault（）
var newList=this.state.items；
var filteredItems=newList.filter（item=>item.category==this.state.category）
this.setState（{filteredItems}）
}
渲染（）{
让我们展示；
如果（this.state.category！==“”）{
show=this.state.filtered.map（（项，i）=>）
}否则{
show=this.state.items.map（（item，i）=>）
}
返回(
光盘
在下面搜索音乐：
音乐风格：
搜寻
{show}
)
}
}
导出默认应用程序；

项目组件

import React from 'react';
import Item from './components/Item';

class App extends React.Component {

  state = {
    items: [
      {
        title: "The Spice Girls",
        price: 10,
        category: "Pop",
        quantity: 1,
      },
      { 
        title: "Beethoven",
        price: 5,
        category: "Classical", 
        quantity: 1,
      },
      {
        title: "Bob Marley",
        price: 15,
        category: "Reggae",
        quantity: 1,
      }
    ],
    category: " ",
    filtered: [],  
  }

  handleChange = e => {
    this.setState({category: e.target.value},()=>console.log(this.state.category));
  }

  handleClick = (event) => {
    event.preventDefault()

    var newList = this.state.items;
    var filteredItems = newList.filter(item => item.category === this.state.category)
    this.setState({filtered: filteredItems})
  }

  render () {
    let show;

    if(this.state.category !== " "){
    show = this.state.filtered.map((item, i) => <Item key = {i} cd={item}/>)
        
    }else{
    show = this.state.items.map( (item,i) => <Item key = {i} cd={item}/>)
   }


    return (
      <div>
        <h1 className = "title">CD</h1>
        <h2>Search music below:</h2>
        <form>
            Music style: <input onChange = {this.handleChange}></input>
            <button onClick = {this.handleClick}>Search</button>
         </form>
        {show}
      </div>
    )
  }
}

export default App;

import React from 'react';

class Item extends React.Component {

    render () {
        return (
            <div className = "items"> 
                 <div className = "item">
                    <h3>{this.props.cd.title}</h3>                    
                    <div className = "price">Price: {this.props.cd.price}€</div>
                    <div className = "quantity">Quantity: {this.props.cd.quantity}</div>
                    <div className = "category">Category: {this.props.cd.category}</div>
                  </div>
            </div>
        )
    }
}  
 
export default Item;

从“React”导入React；
类项扩展了React.Component{
渲染（）{
返回(
{this.props.cd.title}
价格：{this.props.cd.Price}
数量：{this.props.cd.Quantity}
类别：{this.props.cd.Category}
)
}
}  
导出默认项；

在回答您的问题之前，首先提出一些建议更改 在分析您的代码时，有一些事情让我非常困惑，因此我将与您分享它们，好像将来您在团队中工作时，如果其他人能够理解您的代码，这将非常方便

• 文本框有一个on change事件，该事件与文本框旁边搜索按钮的事件不同。用户会期望它是一样的，所以这真的令人困惑

• 基本上，您有两个项目列表，一个是原始项目，另一个是未过滤项目，您可以在屏幕上显示的两个项目之间切换。有时，您需要一个原始集，这很好，但可能需要确保只有

  显示为这样的
  项才是
  状态.items
  或
  状态.filtered
  。我可能会期望
  状态。筛选的
  
  

• 使您的搜索不区分大小写，例如pop应与pop匹配

回答你的问题 如果类别a中没有产品，NotFound组件将显示一条消息

为此，我将首先修改您的显示逻辑以处理相同的筛选列表，只需更改您的事件函数以操作筛选列表并取消对其中的项目的操作

在没有案例的情况下添加另一个条件

   if (this.state.filtered) {
      show = this.state.filtered.map((item, i) => <Item key={i} cd={item} />);
    } else {
      show = <h1>NoneFound</h1>;
    }

我对此的理解是修改onClick事件以正确操作过滤列表

你可以在我的代码沙盒上看到我的完整解决方案

---

非常感谢！我有几个问题；这行中的't'是什么意思：if（[“”，“，”All“）。some（t=>t===category））{基本上是一个lambda或匿名函数。这是一种简写的方式，表示是否有任何类别等于“”或“All”。some函数将在“”和“All”（像一个循环）上迭代，并比较每个类别（t）对于类别，如果其中任何一个匹配，它将返回true。一些类似的函数是map、filter、find和every。您可以在这里阅读它们，因为这是一个匿名函数，您可以随意调用“t”，它通常非常短。我用t表示“term”，它也可以这样写if[，“All”]。一些（函数（term）{if term===caterory return}或者我们可以像这样完整地提取这个函数

const someExpression=t=>t===category

，然后我们就可以做

[“”，“All”]。一些（someExpression）

@Cristina，如果我的答案有帮助的话，你可以把答案标记为接受或者投票给它好了！：）我现在明白了！不过我有几个问题，NoneFound似乎不起作用。如果我添加了另一个类别，但没有向其中添加产品，则类别的名称会显示出来，而不是说NoneFound（理想情况下，这应该是一个单独的组件）。我还需要在搜索之前在页面上显示所有产品，但如果我使用您的解决方案，这些产品最初是隐藏的。