Javascript 如何过滤要使用ReactJS渲染的道具？

我有一个获取

json服务器

数据的代码。并在屏幕上呈现七个名称。我想按输入过滤，只渲染元素filtereds

My Apps.js：

class AppRouter extends React.Component {
  state = {
employeeCurrent: [],
employee: []
  };

  componentDidMount() {
axios
  .get("http://127.0.0.1:3004/employee")

我试图将状态传递给应用程序。但是没有成功。我尝试了身体里的一切。但是也没有成功。有人能帮我怎么做吗

我在打电话，所以有些东西不好记。对不起

试试这个

class Body extends React.Component {
  getName = () => {
    const { employee, add } = this.props;

    //Filter  names in employee array with input 

    const filterNames = employee.filter(x => x.name === "check with the input value" );

     // Then map over the filtered names

    return filterNames.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`https://picsum.photos/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
      };

      render() {
    return <div className="body">{this.getName()}</div>;
      }
    }

类主体扩展了React.Component{
getName=（）=>{
const{employee，add}=this.props；
//使用输入筛选员工数组中的姓名
const filterNames=employee.filter（x=>x.name==“检查输入值”）；
//然后映射过滤后的名称
返回filterNames.map（名称=>(
{" "}
add（name）}key={name.id}className=“item”>
{" "}
{" "}
{name.name}
{" "}
));
};
render（）{
返回{this.getName（）}；
}
}

这里的过滤发生在哪里？如果我没有弄错，你想根据输入对名称进行过滤吗？@AbidHasan这段代码没有be@MontyGoldy是的，他们是..伙计，你可以使用“过滤器”高阶函数来得到结果。例如：-const filteredNames=this.state.employee.filter（x=>x.name==（检查输入值））

 class Body extends React.Component {
  getName = () => {
    const { employee, add } = this.props;
    return employee.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`https://picsum.photos/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
      };

      render() {
    return <div className="body">{this.getName()}</div>;
      }
    }

class Body extends React.Component {
  getName = () => {
    const { employee, add } = this.props;

    //Filter  names in employee array with input 

    const filterNames = employee.filter(x => x.name === "check with the input value" );

     // Then map over the filtered names

    return filterNames.map(name => (
      <Link className="link" to={`/user/${name.name}`}>
        {" "}
        <div onClick={() => add(name)} key={name.id} className="item">
          {" "}
          <img
            className="img"
            src={`https://picsum.photos/${name.name}`}
          />{" "}
          <h1 className="name"> {name.name} </h1>
        </div>{" "}
      </Link>
    ));
      };

      render() {
    return <div className="body">{this.getName()}</div>;
      }
    }