Javascript 反应-当搜索（过滤器）无法找到时，它被卡住

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

下图显示我搜索了111，如果我将其删除到11，它仍然可以正常工作，但如果我搜索11111，它将不显示任何内容，在删除11111到111后，它仍然不显示任何内容，因此我必须输入以开始新的搜索。

发布图像（删除搜索值后，不显示任何内容）

搜索（筛选）代码：

从控制台调试后，我发现

• 此.state.holder（原始温度正常）
• this.state.issues（过滤内容正常）
• 但是this.state.pageOfItems（在它为空之后，则不显示任何内容）

谁能帮我查一下密码吗

注意：我使用来自的分页

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; 

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
导入“whatwg fetch”；
从“../components/Pagination”导入分页；
从“../components/IssueAdd”导入IssueAdd；
类IssueList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
问题：[]，
持有人：[]，
pageOfItems:[]，
};
this.createIssue=this.createIssue.bind（this）；
this.onChangePage=this.onChangePage.bind（this）；
this.filterList=this.filterList.bind（this）；
}
componentDidMount（）{
这是loadData（）；
}
//componentDidUpdate（prevProps）{
//这是loadData（）；
//}
//更改后加载所有新数据库
loadData（）{
获取（'/api/issues'）。然后（响应=>{
if（response.ok）{
response.json（）.then（数据=>{
data.records.forEach（问题=>{
issue.created=新日期（issue.created）；
if（发布完成日期）{
issue.completionDate=新日期（issue.completionDate）；
}
});
this.setState（{issues:data.records，holder:data.records}）；
});
}否则{
response.json（）.then（错误=>{
警报（`Failed to fetch issues${error.message}`）；
});
}
}).catch（错误=>{
警报（`从服务器获取数据时出错：${err}`）；
});
}
createIssue（新发行）{
获取（“/api/issues”{
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（新发行），
})。然后（响应=>{
if（response.ok）{
response.json（）.then（updatedIssue=>{
updatedIssue.created=新日期（updatedIssue.created）；
if（更新发行完成日期）{
updatedIssue.completionDate=新日期（updatedIssue.completionDate）；
}
const newIssues=this.state.issues.concat（updatedIssue）；
this.setState（{issues:newIssues}）；
});
}否则{
response.json（）.then（错误=>{
警报（`添加问题失败：${error.message}`）；
});
}
}).catch（错误=>{
警报（`向服务器发送数据时出错：${err.message}`）；
});
}
onChangePage（pageOfItems）{
this.setState（{pageOfItems:pageOfItems}）；
}
过滤器列表=（e）=>{
设{value}=e.target；
this.setState（{value}，（）=>{
var searchValue=this.state.value.toLowerCase（）；
var updatedList=this.state.holder；
updatedList=updatedList.filter（（项）=>{
返回Object.keys（item）.some（key=>item[key].toString（）.toLowerCase（）.search（searchValue）！=-1）；
});
this.setState（{issues:updatedList}）；
});
}
render（）{
返回(
问题追踪器

身份证件
地位
所有者
创建
努力
竣工日期
标题
{this.state.pageOfItems.map（问题=>(
{问题.\u id}
{issue.status}
{issue.owner}
{issue.created.toDateString（）}
{问题.努力}
{issue.completionDate？issue.completionDate.toDateString（）：''}
{issue.title}
))}

);
}
}
导出默认发行列表；

谢谢@Justin Pearce和@Tomas Eglinskas

最后，我发现我必须注释掉分页（setPage函数）中的条件

setPage（第页）{
var{items，pageSize}=this.props；
var pager=this.state.pager；
//如果（第<1页| |页>寻呼机总页数）{
//返回；
//}
pager=this.getPager（items.length、page、pageSize）；
var pageOfItems=items.slice（pager.startIndex，pager.endIndex+1）；
this.setState（{pager:pager}）；
此.props.onChangePage（pageOfItems）；
}

---

我不知道将来有一天我会出现错误？？？

当您清除过滤器时，是否将结果列表恢复到原始的未过滤状态？我想知道您是否正在尝试根据空列表进行筛选。可能@JustinPearce是对的，您正在筛选变异列表中的记录，而不是所有可用的数据记录。嗨，Justin，我使用temp this.state.holder作为原始记录。每次我更改输入文本框中的值时，它都应该从this.state.holder进行搜索，那么我如何才能清除fil

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; 

setPage(page) {
        var { items, pageSize } = this.props;
        var pager = this.state.pager;

        //if (page < 1 || page > pager.totalPages) {
        //  return;
        //}

        pager = this.getPager(items.length, page, pageSize);
        var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
        this.setState({ pager: pager });
        this.props.onChangePage(pageOfItems);
    }