Как сделать поиск в состоянии (реагировать)

Question

Я могу хранить массив данных, содержащий объекты логина и пропуска. Я создал поле ввода, в котором я пишу то, что я хочу найти в состоянии. Как я могу фильтровать состояние и отображать только соответствующие элементы?

Конструктор

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { login: "login", pass: "pass" },
        { login: "login2", pass: "pass2" }
      ],
      login: "",
      pass: "",
      find: ""
    };

Добавление и отображение данных

add(e) {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  show(e) {
    e.preventDefault();

    if (!this.state.login.length || !this.state.pass.length) {
      return;
    } else {
      const newUser = {
        login: this.state.login,
        pass: this.state.pass
      };

      this.setState(state => ({
        data: state.data.concat(newUser)
      }));
    }
  }

Поиск

 filterUsers(e) {
    let { data } = this.state;

    //console.log(this.temp.login);

    this.setState({
      find: e.currentTarget.value
    });
  }

Render

   <input onInput={this.filterUsers.bind(this)} />
                  <div>{this.state.find}</div>
                  {this.state.data.map((val, index) => (
                    <>
                      <td>{val.login}</td>

                      <td>{val.pass}</td>

                      <br />
                      <div />
                    </>
                  ))}

Answer 1

Если вы хотите, чтобы ваши state.data оставались нетронутыми, вы можете отфильтровать ваш поисковый запрос в методе рендеринга.

filterUsers(e) {
    this.setState({
        find: e.currentTarget.value
    });
}


<input onInput={this.filterUsers.bind(this)} />
<div>{this.state.find}</div>
{this.state.data.filter(x => x.login.includes(this.state.find)).map((val, index) => (
    <>
        <td>{val.login}</td>

        <td>{val.pass}</td>

        <br />
        <div />
    </>
))}

Answer 2

Какое свойство вы фильтруете? Авторизоваться? Я рекомендую создать массив отфильтрованных данных в вашем состоянии, чтобы вы не изменяли оригинал.

filterUsers(event)
{
  let filteredArray = this.state.data.filter((user) => 
  {
    user.login === event.currentTarget.value;
    //or if you want partial matches
    //user.login.includes(event.currentTarget.value)
  })
  this.setState({
    filteredList: filteredArray
  });
}