Управлять поиском в нескольких массивах состояний и сохранять исходный массив состояний?
Я пытаюсь создать функцию поиска, чтобы иметь возможность искать массив в состоянии.
var searchString = "search word"
var updatedList = cases.filter((item) => {
return Object.keys(item).some(
key => (item as any)[key]
.toString()
.toLowerCase()
.search(searchString.toLowerCase()) !== -1
);
});
this.setState({
cases: updatedList
})
Это обновляет state.cases и отображает элементы, найденные в массиве, с объектами, что хорошо. Но когда я выполняю другой поиск, state.cases, конечно же, обновляется и содержит только элементы из предыдущего поиска.
Как я могу сохранить «старое» состояние перед первым поиском и выполнить несколько поисков?
Варианты в состоянии используются в компоненте, который отображает таблицу с результатом.
да, я использую машинопись
Знайте, что это широкомасштабное решение, но задумывались ли вы о реализации избыточности?
Вы должны фильтровать свои элементы внутри функции рендеринга
вам не нужно устанавливать другой массив в состоянии
вы пытались отправить prevstate в качестве аргумента setState
Ответы 1
Может быть, не устанавливать состояние для отфильтрованных случаев ..? Просто установите состояние для строки поиска и попробуйте это
render() {
const { searchString } = this.state;
const { cases } = this.props;
let filteredCases = cases;
if(!!searchString) {
filteredCases = cases.filter((item) => {
return Object.keys(item).some(
key => (item as any)[key]
.toString()
.toLowerCase()
.search(searchString.toLowerCase()) !== -1
);
});
}
return <>{filteredCases}</>
}
Таким образом, вы просто отфильтруете случаи на основе строки поиска.
Состояние случаев используется в таблице реагирования, поэтому я хочу обновить состояние для отображения результатов поиска.
Итак, теперь вы можете просто передать filteredCases в таблицу, чтобы отобразить результаты поиска, соответствующие строке.
Я до сих пор не понимаю, как это может работать. В ReactTable есть свойство данных. Здесь я указываю this.state.cases. Затем я нажимаю кнопку «Поиск», я хочу, чтобы он повторно отображал state.cases. Как я могу использовать этот возврат как в ReactTable, так и для моей кнопки поиска?
Вот так может быть <ReactTable data={filteredCases} {...otherProps}>, <SearchButton value={this.state.searchString} onChange={this.updateSearchString}/>. Не могли бы вы создать скрипку или что-то в этом роде с вашим кодом. Будет легче
Вы используете
typescript?