Javascript 如何在使用ReactJS过滤元素之前渲染元素？

我正在做一个项目，它对

json服务器

执行

获取

，并在屏幕上呈现它们

但当我在它上面添加了一个过滤函数时，它只有在我键入一个要过滤的名称后才会呈现。我想让他渲染每个人并制作过滤器

My Body.js（其中是我的渲染功能）：

从“React”导入React；
导入“/Body.css”；
从“react router dom”导入{Link}；
类主体扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“，
employeeBody:this.props.employee，
}
}
getName=（）=>{
const{employee，add}=this.props；
const{employeeBody}=this.state；
return employee.map（name=>(
add（name）}key={name.id}>
{name.name}
));
};
---
getValueInput=（evt）=>{
常量输入值=evt.target.value；
this.setState（{input:inputValue}）；
此.filterNames（输入值）；
console.log（this.state.employeeBody）
}
过滤器名称（输入值）{
const{employee}=this.props；
这是我的国家({
employeeBody:employee.filter（项=>
项目名称包括（输入值））
});
}
---
render（）{
返回(
{this.getName（）}
)
}
}
导出默认体您应该在渲染方法中进行筛选

render() {
  const { employee: employees } = this.props; // rename the variable {employee} to plural {employees}, it has more sense.
  const { input } = this.state;
  return (
    <div>
      <div className="body">
        {employees
          .filter(employee => employee.name.includes(input))
          .map(employee => {
            <div className='item'>
              <Link className="link" to={`/user/${employee.id}`}>
                <div onClick={() => add(employee)} key={employee.id}>
                  <img className="img"
                    src={`https://picsum.photos/${employee.id}`}
                  />
                </div>
                <h1 className="name2"> {employee.name} </h1>
              </Link>
            </div>
          })}
      </div>
      <div className='input'>
        <input type="text" onChange={(e) => this.setState({ input: e.target.value })} />
      </div>
    </div>
  );
}

render（）{
const{employee:employees}=this.props；//将变量{employee}重命名为复数{employees}，它更有意义。
const{input}=this.state；
返回(
{雇员
.filter（employee=>employee.name.includes（输入））
.map（雇员=>{
add（employee）}key={employee.id}>
{employee.name}
})}
this.setState（{input:e.target.value}）}/>
);
}

请记住，
includes
方法区分大小写，在进行比较之前，它应该是小写的

备注：您还可以创建一个变量/组件/函数，并在其中呈现所有呈现的“逻辑”。
您应该在呈现方法中进行过滤

render() {
  const { employee: employees } = this.props; // rename the variable {employee} to plural {employees}, it has more sense.
  const { input } = this.state;
  return (
    <div>
      <div className="body">
        {employees
          .filter(employee => employee.name.includes(input))
          .map(employee => {
            <div className='item'>
              <Link className="link" to={`/user/${employee.id}`}>
                <div onClick={() => add(employee)} key={employee.id}>
                  <img className="img"
                    src={`https://picsum.photos/${employee.id}`}
                  />
                </div>
                <h1 className="name2"> {employee.name} </h1>
              </Link>
            </div>
          })}
      </div>
      <div className='input'>
        <input type="text" onChange={(e) => this.setState({ input: e.target.value })} />
      </div>
    </div>
  );
}

render（）{
const{employee:employees}=this.props；//将变量{employee}重命名为复数{employees}，它更有意义。
const{input}=this.state；
返回(
{雇员
.filter（employee=>employee.name.includes（输入））
.map（雇员=>{
add（employee）}key={employee.id}>
{employee.name}
})}
this.setState（{input:e.target.value}）}/>
);
}

请记住，
includes
方法区分大小写，在进行比较之前，它应该是小写的

备注：您还可以创建一个变量/组件/函数，并在其中呈现所有呈现的“逻辑”。
Hello，非常感谢给出错误：
/src/Body.js第58行：意外使用“name”无限制全局变量第59行：未定义“add”无未定义第59行：意外使用“name”无限制全局变量第59行：意外使用“name”无限制全局变量第61行：意外使用“name”无限制全局变量第64行：意外使用“name”没有限制全局搜索关键字以了解有关每个错误的详细信息。
我这样做：
返回employee.filter（employee=>employee.name.includes（input））.map（name=>..
现在它开始工作了，但是你的帮助是必不可少的。是的，我的@jota坏了，
名称
我忘了换成
员工
。另外，谈到为什么渲染内部更好，也是丹说如果我们可以使用渲染方法中的道具进行计算，那么计算值不应该处于状态。（我将尝试查找该评论的链接）您好，非常感谢您给出这个错误：
/src/Body.js第58行：意外使用“name”无限制全局变量第59行：未定义“add”无未定义第59行：意外使用“name”无限制全局变量第59行：意外使用“name”无限制全局变量第61行：意外使用“name”无限制全局变量第64行：意外使用“name”没有限制全局搜索关键字以了解有关每个错误的详细信息。
我这样做：
返回employee.filter（employee=>employee.name.includes（input））.map（name=>..
现在它开始工作了，但是你的帮助是必不可少的。是的，我的@jota坏了，
名称
我忘了换成
员工
。另外，谈到为什么渲染内部更好，也是丹说如果我们可以使用渲染方法中的道具进行计算，那么计算值不应该处于状态。（我将尝试查找该评论的链接）