React - 当搜索（过滤器）找不到它时卡住

Question

从我最新的React Search（过滤器）实现中，我有很多人帮助我，直到它成功。 我还有另一个问题，当搜索（过滤器）无法在内容中找到任何数据时，它会卡住，然后我必须从输入框进入初始搜索。

以下附图显示我搜索111，如果我将其删除为11它仍然正常工作，但如果我搜索11111它没有显示任何内容并且在删除11111到111后它仍然没有显示任何内容所以我必须输入开始新的搜索。

发布图片（删除搜索值后，没有显示）

搜索（过滤器）代码：

filterList = (e) => {
    let { value } = e.target
    this.setState({ value }, () => {
        var searchValue = this.state.value.toLowerCase();
        var updatedList = this.state.holder;
        updatedList = updatedList.filter((item) => {
            return Object.keys(item).some(key => item[key].toString().toLowerCase().search(searchValue) !== -1);
        });
        this.setState({ issues: updatedList });
    });
  }

从控制台调试后我发现

• this.state.holder（原始温度还可以）
• this.state.issues（已过滤的内容没问题）
• 但是this.state.pageOfItems（在它为空之后，没有显示）

有人可以帮我查一下我的代码吗？

注意：我使用http://jasonwatmore.com/post/2017/03/14/react-pagination-example-with-logic-like-google

中的分页

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: [],
        holder: [],
        pageOfItems: [],
    };


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

  //componentDidUpdate(prevProps) {
  //    this.loadData();
  //}
  // Load all new database after changed

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

  createIssue(newIssue) {
    fetch('/api/issues', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newIssue),
    }).then(response => {
      if (response.ok) {
        response.json().then(updatedIssue => {
          updatedIssue.created = new Date(updatedIssue.created);
          if (updatedIssue.completionDate) {
            updatedIssue.completionDate = new Date(updatedIssue.completionDate);
          }
          const newIssues = this.state.issues.concat(updatedIssue);
          this.setState({ issues: newIssues });
        });
      } else {
        response.json().then(error => {
          alert(`Failed to add issue: ${error.message}`);
        });
      }
    }).catch(err => {
      alert(`Error in sending data to server: ${err.message}`);
    });
  }

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

  filterList = (e) => {
    let { value } = e.target;
    this.setState({ value }, () => {
        var searchValue = this.state.value.toLowerCase();
        var updatedList = this.state.holder;
        updatedList = updatedList.filter((item) => {
            return Object.keys(item).some(key => item[key].toString().toLowerCase().search(searchValue) !== -1);
        });
        this.setState({ issues: updatedList });
    });
  }

  render() {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <hr />
        <div className="filter-list">
            <form>
                <fieldset className="form-group">
                    <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;