Javascript 使用React中的按钮筛选数组

所以我制作了一个过滤列表应用程序，你可以点击按钮，它将所有名字中有字母的用户排除在外。这是我目前所拥有的，但对我来说并不适用。任何帮助都将不胜感激

另外，我一直收到这个错误。/src/index.js及其引发的这些错误

App.js

import React from 'react';
import "./App.css";
const buttons = [
  { name: "Reset", value: "Reset"},
  { name: "Bryan", value: "B"},
  { name: "Annie", value: "A"},
  { name: "Miles", value: "M"},
  
];
class User extends React.Component {
 constructor() {
   super();
   this.state = {
     users: [
       {
         name: "Bam",
       },
       {
         name: "Brinley",
       },
       {
        name: "Bart",
      },
      {
        name: "Brielle",
      },
      {
        name: "Booka",
      },
      {
        name: "Ann",
      },
      {
        name: "Analise",
      },
      {
        name: "Anthony",
      },
      {
        name: "Arrow",
      },
      {
        name: "Arika",
      },
      {
        name: "Marty",
      },
      {
        name: "Mike",
      },
      {
        name: "Minto",
      },
      {
        name: "Milk",
      },
      {
        name: "Monty",
      },
      {
        name: "Brett",
      },
      {
        name: "Byron",
      },
      {
        name: "Brad",
      },
      {
        name: "Bento",
      },
      {
        name: "Bark",
      },
     ]
     filterName: []
   };
 }
 componentDidMount() {
  this.setState({
    filterName: this.state.users
  });
}
handleClick = name => {
  let filterName = [];
  if (name === "All") {
    filterName = this.state.users;
  } else {
    filterName = this.state.users.filter(
      users => users.origin === name
    );
  }

  this.setState({ filterName });
};

render() {
  const renderAll = this.state.filterName.map(User => (
    <li key={User.name}>{users.name}</li>
  ));
  return (
    <div>
      {buttons.map(({ name, value }) => (
        <button
          key={name}
          value={value}
          onClick={this.handleClick.bind(this, name)}
        >
          {name}
        </button>
      ))}

      <p>User: {renderAll}</p>
      <h2>{this.state.filterName.length}</h2>
    </div>
  );
}
}

export default App;

从“React”导入React；
导入“/App.css”；
常量按钮=[
{name:“Reset”，value:“Reset”}，
{名称：“布莱恩”，值：“B”}，
{名称：“安妮”，值：“A”}，
{名称：“英里”，值：“M”}，
];
类用户扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户：[
{
名称：“Bam”，
},
{
姓名：“布林利”，
},
{
姓名：“巴特”，
},
{
姓名：“布瑞尔”，
},
{
名称：“布卡”，
},
{
姓名：“安”，
},
{
名称：“分析”，
},
{
姓名：“安东尼”，
},
{
名称：“箭头”，
},
{
姓名：“阿里卡”，
},
{
姓名：“马蒂”，
},
{
姓名：“迈克”，
},
{
姓名：“明托”，
},
{
名称：“牛奶”，
},
{
姓名：“蒙蒂”，
},
{
姓名：“布雷特”，
},
{
姓名：“拜伦”，
},
{
姓名：“布拉德”，
},
{
姓名：“便当”，
},
{
名称：“树皮”，
},
]
过滤器名称：[]
};
}
componentDidMount（）{
这是我的国家({
过滤器名称：this.state.users
});
}
handleClick=name=>{
让filterName=[]；
如果（名称=“全部”）{
filterName=this.state.users；
}否则{
filterName=this.state.users.filter(
users=>users.origin==名称
);
}
this.setState（{filterName}）；
};
render（）{
const renderAll=this.state.filterName.map（用户=>(
{users.name}
));
返回(
{buttons.map（{name，value}）=>(
{name}
))}
用户：{renderAll}

{this.state.filterName.length}
);
}
}
导出默认应用程序；

您在

过滤器名称

//more on top
  {
        name: "Bark",
  },
],
filterName: []

我已对您的

onClick

功能进行了修改

handleClick = name => {
  let filterName = []
  const { users } = this.state;

  if (name && name !== "All") {
    filterName = users.filter(
      //no such property called origin, only 'name' occurs. Therefore, I assume that you mean you want to use name as the sorting criteria
      user => user.name === name
    );
  } else {
     // For name === 'all' && name === undefined cases
     filterName = users
  }

  this.setState({ filterName });
};

---

这是一个语法错误，您在

filterName:[]

之前漏掉了一个逗号。谢谢您的回复，我在那里输入了一个逗号，但我的代码似乎仍然不起作用。有错误消息吗？查看了我更新后的

handleClick

功能的答案谢谢您的回复