Моя React Pagination работает очень хорошо, а функция поиска - нет? - PullRequest
Новая
       15

Моя React Pagination работает очень хорошо, а функция поиска - нет?

0 голосов
/ 10 мая 2018

Я реализовал приложение React для получения базы данных из MongoDB с помощью Express Server. Для функции нумерации страниц работает хорошо, но при реализации функции поиска работает только при наборе в поле ввода. Если я удаляю символ, он должен искать снова, но это все еще. Может кто-нибудь, пожалуйста, помогите проверить мой код ??

IssueList.js 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'whatwg-fetch';
import Pagination from '../components/Pagination';
import IssueAdd from '../components/IssueAdd';

class IssueList extends Component {

  constructor(props) {
    super(props);


    this.state = {
        issues: [],
        pageOfItems: [],
    };


    this.createIssue = this.createIssue.bind(this);
    this.onChangePage = this.onChangePage.bind(this);
    this.filterList = this.filterList.bind(this);
  }
  componentDidMount() {
        this.loadData();
  }

  loadData() {
    fetch('/api/issues').then(response => {
      if (response.ok) {
        response.json().then(data => {
          data.records.forEach(issue => {
            issue.created = new Date(issue.created);
            if (issue.completionDate) {
              issue.completionDate = new Date(issue.completionDate);
            }
          });
          this.setState({ issues: data.records });
        });
      } else {
        response.json().then(error => {
          alert(`Failed to fetch issues ${error.message}`);
        });
      }
    }).catch(err => {
      alert(`Error in fetching data from server: ${err}`);
    });
  }

  onChangePage(pageOfItems) {
    this.setState({ pageOfItems: pageOfItems });
  }

  filterList = (e) => {
    var updatedList = this.state.issues;
    updatedList = updatedList.filter((item) => {
        return item.title.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    });
    this.setState({ issues: updatedList });
  }

  render() {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <hr />
        <div className="filter-list">
            <form>
                <fieldset className="form-group">
                    <legend>Search</legend>
                    <input 
                        type="text" 
                        className="form-control form-control-lg" 
                        placeholder="Search" 
                        onChange={this.filterList}
                    />
                </fieldset>
            </form>
        </div>
        <div className="panel panel-default">
                <table className="table table-bordered">
                <thead>
                    <tr>
                    <th>ID</th>
                    <th>Status</th>
                    <th>Owner</th>
                    <th>Created</th>
                    <th>Effort</th>
                    <th>Completion Date</th>
                    <th>Title</th>
                    </tr>
                </thead>
                    <tbody>
                    {this.state.pageOfItems.map(issue => (
                        <tr key={issue._id}>
                                <td>{issue._id}</td>
                                <td>{issue.status}</td>
                                <td>{issue.owner}</td>
                                <td>{issue.created.toDateString()}</td>
                                <td>{issue.effort}</td>
                                <td>{issue.completionDate ? issue.completionDate.toDateString() : ''}</td>
                                <td>{issue.title}</td>
                              </tr>
                            ))}
                    </tbody>
                </table>
            </div>
        <Pagination
            items={this.state.issues}
            onChangePage={this.onChangePage}
        />
        <hr />
        <IssueAdd createIssue={this.createIssue} />
      </div>
    );
  }
}

export default IssueList;

Отредактировано

Я пытался добавить функцию loadData () в filterList () 

filterList = (e) => {
    this.loadData();
    var updatedList = this.state.issues;
    updatedList = updatedList.filter((item) => {
        return item.title.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    });
    this.setState({ issues: updatedList });
  }

Может выполнять поиск, но после этого возвращается в исходное состояние (стр. 1).

1 Ответ

0 голосов
/ 10 мая 2018

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'whatwg-fetch';
import Pagination from '../components/Pagination';
import IssueAdd from '../components/IssueAdd';

class IssueList extends Component {

  constructor(props) {
    super(props);


    this.state = {
        issues: [],
        holder: [],
        pageOfItems: [],
    };


    this.createIssue = this.createIssue.bind(this);
    this.onChangePage = this.onChangePage.bind(this);
    this.filterList = this.filterList.bind(this);
  }
  componentDidMount() {
        this.loadData();
  }

  loadData() {
    fetch('/api/issues').then(response => {
      if (response.ok) {
        response.json().then(data => {
          data.records.forEach(issue => {
            issue.created = new Date(issue.created);
            if (issue.completionDate) {
              issue.completionDate = new Date(issue.completionDate);
            }
          });
          this.setState({ issues: data.records, holder: data.records });
        });
      } else {
        response.json().then(error => {
          alert(`Failed to fetch issues ${error.message}`);
        });
      }
    }).catch(err => {
      alert(`Error in fetching data from server: ${err}`);
    });
  }

  onChangePage(pageOfItems) {
    this.setState({ pageOfItems: pageOfItems });
  }

  filterList = (e) => {
    let { value } = e.target
    this.setState({ value }, () => {
    //running this after setting the value in state because of async
    var updatedList = this.state.holder;
    updatedList = updatedList.filter((item) => {
        return item.title.toLowerCase().search(this.state.value.toLowerCase()) !== -1;
    });
    this.setState({ issues: updatedList });
    })
  }

  render() {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <hr />
        <div className="filter-list">
            <form>
                <fieldset className="form-group">
                    <legend>Search</legend>
                    <input 
                        type="text" 
                        className="form-control form-control-lg" 
                        placeholder="Search" 
                        value={this.state.value}
                        onChange={this.filterList}
                    />
                </fieldset>
            </form>
        </div>
        <div className="panel panel-default">
                <table className="table table-bordered">
                <thead>
                    <tr>
                    <th>ID</th>
                    <th>Status</th>
                    <th>Owner</th>
                    <th>Created</th>
                    <th>Effort</th>
                    <th>Completion Date</th>
                    <th>Title</th>
                    </tr>
                </thead>
                    <tbody>
                    {this.state.pageOfItems.map(issue => (
                        <tr key={issue._id}>
                                <td>{issue._id}</td>
                                <td>{issue.status}</td>
                                <td>{issue.owner}</td>
                                <td>{issue.created.toDateString()}</td>
                                <td>{issue.effort}</td>
                                <td>{issue.completionDate ? issue.completionDate.toDateString() : ''}</td>
                                <td>{issue.title}</td>
                              </tr>
                            ))}
                    </tbody>
                </table>
            </div>
        <Pagination
            items={this.state.issues}
            onChangePage={this.onChangePage}
        />
        <hr />
        <IssueAdd createIssue={this.createIssue} />
      </div>
    );
  }
}

export default IssueList;
...