Управлять поиском в нескольких массивах состояний и сохранять исходный массив состояний?

Я пытаюсь создать функцию поиска, чтобы иметь возможность искать массив в состоянии.

 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, конечно же, обновляется и содержит только элементы из предыдущего поиска.

Как я могу сохранить «старое» состояние перед первым поиском и выполнить несколько поисков?

Варианты в состоянии используются в компоненте, который отображает таблицу с результатом.

Вы используете typescript?

Vencovsky 22.05.2019 16:29

да, я использую машинопись

Robin 22.05.2019 16:38

Знайте, что это широкомасштабное решение, но задумывались ли вы о реализации избыточности?

Perniferous 22.05.2019 16:40

Вы должны фильтровать свои элементы внутри функции рендеринга

Shridhar Sharma 22.05.2019 16:41

вам не нужно устанавливать другой массив в состоянии

Shridhar Sharma 22.05.2019 16:42

вы пытались отправить prevstate в качестве аргумента setState

saketh 22.05.2019 16:46
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
6
169
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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}</>
}

Таким образом, вы просто отфильтруете случаи на основе строки поиска.

Состояние случаев используется в таблице реагирования, поэтому я хочу обновить состояние для отображения результатов поиска.

Robin 23.05.2019 08:20

Итак, теперь вы можете просто передать filteredCases в таблицу, чтобы отобразить результаты поиска, соответствующие строке.

sachin kalekar 23.05.2019 08:26

Я до сих пор не понимаю, как это может работать. В ReactTable есть свойство данных. Здесь я указываю this.state.cases. Затем я нажимаю кнопку «Поиск», я хочу, чтобы он повторно отображал state.cases. Как я могу использовать этот возврат как в ReactTable, так и для моей кнопки поиска?

Robin 23.05.2019 08:56

Вот так может быть <ReactTable data={filteredCases} {...otherProps}>, <SearchButton value={this.state.searchString} onChange={this.updateSearchString}/>. Не могли бы вы создать скрипку или что-то в этом роде с вашим кодом. Будет легче

sachin kalekar 23.05.2019 09:05

Другие вопросы по теме