Из моей последней реализации 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;