Поиск сузить результаты Реагировать

Question

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

if (this.state.data !== null) {

  result = this.state.data.filter(state => {
    const regex = new RegExp(
      `^${this.state.name || this.state.email || this.state.body}`,
      "gi"
    );

    return (
      state.name.match(regex) ||
      state.email.match(regex) ||
      state.body.match(regex)
    );
  });
}

Поиск

import React, { Component } from "react";
import Table from "./Table";
import axios from "axios";
export default class Main extends Component {
  state = {
    data: null
  };
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
    axios
      .get("https://jsonplaceholder.typicode.com/comments")
      .then(res =>
        this.setState({
          data: res.data
        })
      )
      .catch(err => console.log(err));
  };
  render() {
    let result;

    if (this.state.data !== null) {

      result = this.state.data.filter(state => {
        const regex = new RegExp(
          `^${this.state.name || this.state.email || this.state.body}`,
          "gi"
        );

        return (
          state.name.match(regex) ||
          state.email.match(regex) ||
          state.body.match(regex)
        );
      });
    }
    console.log(this.state.name);
    console.log(this.state.email);
    console.log(this.state.body);
    console.log(result);
    console.log(this.state.data);
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>
                <input
                  label="Name"
                  name="name"
                  placeholder="Name "
                  onChange={this.onChange}
                />
              </th>
              <th>
                <input
                  label="Name"
                  name="email"
                  placeholder="Email "
                  onChange={this.onChange}
                />
              </th>
              <th>
                <input
                  label="Name"
                  name="body"
                  placeholder="Body "
                  onChange={this.onChange}
                />
              </th>
            </tr>
          </thead>
          {result !== undefined ? <Table data={result} /> : <p>Loading</p>}
        </table>
      </div>
    );
  }
}

Table.js

import React, {Component} из "act ";

export default class Table extends Component {
  render() {
    const { data } = this.props;
    console.log(data);
    return (
      <tbody>
        {data.map(el => (
          <tr key={el.id}>
            <td>{el.name}</td>
            <td>{el.email}</td>
            <td>{el.body}</td>
          </tr>
        ))}
      </tbody>
    );
  }
}

Answer 1

Я думаю, что если вы в порядке с .startsWith(), это будет очень чистое и читаемое решение без регулярных выражений.Они могут быть не нужны здесь:

result = this.state.data.filter(record => {
    return (
        record.name.starsWith(this.state.name) ||
        record.email.starsWith(this.state.email) ||
        record.body.starsWith(this.state.body)
    );
});

.startsWith() не поддерживается IE , но вы можете заполнить его, как описано здесь :

if (!String.prototype.startsWith) {
    Object.defineProperty(String.prototype, 'startsWith', {
        value: function(search, pos) {
            pos = !pos || pos < 0 ? 0 : +pos;
            return this.substring(pos, pos + search.length) === search;
        }
    });
}

РЕДАКТИРОВАТЬ:
Если вы хотите, чтобы все фильтры соответствовали, просто используйте && вместо ||.Кроме того, если вы хотите найти строку в любом месте данных (и не только в начале), код может выглядеть следующим образом:

result = this.state.data.filter(record => {
    return (
        record.name.indexOf(this.state.name) !== -1 &&
        record.email.indexOf(this.state.email) !== -1 &&
        record.body.indexOf(this.state.body) !== -1
    );
});

Это все равно позволяет избежать использования RegEx, потому что в этом нет необходимости.