javascript - 如何使用ReactJS渲染过滤元素之前的元素？

Question

我正在做一个项目，它对 json-server 进行 get 操作，并将它们呈现在屏幕上。

但是当我在其上添加过滤功能时，它仅在我输入要过滤的名称后才会呈现。我希望他渲染每个人并制作滤镜。

My Body.js(我的渲染函数在哪里):

import React from 'react';
import './Body.css';
import { Link } from "react-router-dom";

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      employeeBody: this.props.employee,
    }
  }


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


  ---
  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
    this.filterNames(inputValue);
    console.log(this.state.employeeBody)
  }

  filterNames (inputValue) {
  const { employee } = this.props;
  this.setState({
    employeeBody: employee.filter(item => 
       item.name.includes(inputValue))
  });
  }
---

  render() {
    return (
    <div>
      <div className="body">
        {this.getName()}
      </div> 
      <div className='input'>
        <input type="text" onChange={this.getValueInput} /> 
      </div>
    </div>
    )
  }
}

export default Body;

我的App.js(我通过axios的get获取状态的地方。):

import React from 'react';
import {
  BrowserRouter as Router,
  Route
} from "react-router-dom";
import './App.css';
import axios from 'axios';
import Body from './Body';
import User from './User';
import Header from './Header';


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

  componentDidMount() {
    axios
      .get("http://127.0.0.1:3004/employee")
      .then(response => this.setState({
        employee: response.data
      }));
  }

  add = name => {
    this.setState(prevState => {
      const copy = prevState.employeeCurrent.slice(1);
      copy.push(name);
      return {
        employeeCurrent: copy
      };
    });
  };

  render() {
    return ( <
      Router >
      <
      div className = "router" >
      <
      Header / >
      <
      Route exact path = "/"
      render = {
        props => ( <
          Body { ...props
          }
          add = {
            this.add
          }
          employee = {
            this.state.employee
          }
          employeeCurrent = {
            this.state.employeeCurrent
          }
          />
        )
      }
      /> <
      Route path = "/user/:id"
      component = {
        props => ( <
          User { ...props
          }
          employee = {
            this.state.employee
          }
          employeeCurrent = {
            this.state.employeeCurrent
          }
          />
        )
      }
      /> <
      /div> <
      /Router>
    );
  }
}
export default AppRouter;

有人可以帮助我吗？

Answer 1

您应该在渲染方法中进行过滤。

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>
  );
}

请记住，方法 includes 区分大小写，在比较之前应将其小写。

P.S.:您还可以创建一个变量/组件/函数并渲染分割那里渲染的所有“逻辑”。