Я пытаюсь добавить поисковый запрос для фильтрации данных, которые я получаю из базы данных. Может ли кто-нибудь рассказать мне, как я могу фильтровать и отображать результаты поиска. Я хочу найти MeetingName, которое было сопоставлено с элементами. Прямо сейчас приложение отображает весь список элементов из базы данных.
Спасибо.
import React, { Component } from 'react';
import { Table, Input } from 'reactstrap';
import { connect } from 'react-redux';
import { getItems, deleteItem } from "../actions/itemActions";
import PropTypes from 'prop-types';
class Directory extends Component {
componentDidMount() {
this.props.getItems();
}
onDeleteClick = (id) => {
this.props.deleteItem(id);
}
render() {
const { items } = this.props.item;
return(
<div>
<Input type = "text" placeholder = "search"/>
<br/>
<Table>
<thead>
<tr>
<th>Day</th><th>Time</th><th>Meeting Name</th><th>Address</th><th>City</th><th>Zip Code</th><th></th>
</tr>
</thead>
{items.map(({ _id, Day, Time, MeetingName, Address, City, Zip }) => (
<tbody key = {_id}>
<tr>
<td>{Day}</td><td>{Time}</td><td>{MeetingName}</td><td>{Address}</td><td>{City}</td><td>{Zip}</td>
{/*<Button
className = "remove-btn"
color = "danger"
size = "sm"
onClick = {this.onDeleteClick.bind(this, _id)}
>
×
</Button>*/}
</tr>
</tbody>
))}
</Table>
</div>
);
}
}
Directory.propTypes = {
getItems: PropTypes.func.isRequired,
item: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
item: state.item
})
export default connect(
mapStateToProps,
{ getItems, deleteItem }
)(Directory);



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно изменить несколько вещей в вашем компоненте
Состояние инициализации в конструкторе, как показано ниже
this.state = { searchedValue: '' };
Добавить прослушиватель событий onChange на input
<input type = "text" placeholder = "search" onChange = {this.onSearch} value = {this.state.searchedValue} />
Измените состояние с введенным значением при вызове функции onSearch
onSearch = (event) => {
this.setState({ searchedValue: event.target.value });
}
Отфильтруйте список items с помощью searchValue в функции render
const filteredItems = items.filter((item) => item.meetingName.includes(this.state.searchedValue));
Используйте массив filteredItems для создания нескольких tr
Как указано в комментарии к вашему сообщению, реагировать-данные-сетка - хороший вариант, но вы можете выбрать то, что лучше всего подходит для вашего приложения.
Вы можете использовать библиотеку типа реагировать-данные-сетка, которая обеспечивает простую обработку функции поиска.