Реагируйте на проблему с поиском и фильтрацией

Question

Я работаю над компонентом, который должен уметь:

1. Поиск по вводу - при использовании поля ввода функция вызывается после срабатывания события onBlur. После события onBlur будет запущен метод startSearch ().

2. Фильтр по выбранному жанру - из другого компонента пользователь может выбрать жанр из списка жанров. После события onClick будет запущен метод startFilter ().

ХОРОШИЕ НОВОСТИ: Я получил две вышеупомянутые функции.

Плохие новости: Указанные выше 2 функции не работают правильно. Пожалуйста, смотрите код внизу. 2 звонка под работой, но только если я прокомментирую один из 2 выходов. Я пытался настроить метод startSearch () различными способами, но я просто продолжаю идти к большой толстой стене.

        //////Searching works
        //////this.filter(this.state.searchInput);

         //Filtering works            
         this.startFilter(this.state.searchInput);

ВОПРОС Как мне заставить работать фильтр / метод поиска? . К сожалению, просто поместить их в if / else не является решением (см. Комментарии в коде).

import { Component } from 'preact';
import listData from '../../assets/data.json';
import { Link } from 'preact-router/match';
import style from './style';



export default class List extends Component {
	state = {
		selectedStreamUrl: "",
		searchInput: "",
		showDeleteButton: false,
		searchByGenre: false,
		list: [],

	}


	startFilter(input, filterByGenre) {
		this.setState({
			searchByGenre: true,
			searchInput: input,
			showDeleteButton: true
		});
		alert("startFilter  ")
		console.log(this.state.searchByGenre)
		/////////---------------------------------
		document.getElementById("searchField").disabled = false;
		document.getElementById('searchField').value = input
		document.getElementById('searchField').focus()
		// document.getElementById('searchField').blur()
		document.getElementById("searchField").disabled = true;


		console.log(input)
		this.filter(input);


	}

	//search
	startSearch(input) {
		alert("startSearch  ")
		console.log(this.state.searchByGenre)

		//komt uit render()
		if (!this.state.searchByGenre) {
			//check for input

			this.setState({
				searchInput: input.target.value,
				showDeleteButton: true,
			})

			//Searching works
			//this.filter(this.state.searchInput);

			//Filtering works
			this.startFilter(this.state.searchInput);

			// DOESNT WORK:
			// if (this.state.searchInput != "") {
			// 	this.filter(this.state.searchInput);
			// } else {
			// 	this.startFilter(this.state.searchInput);
			// }
		}


	}

	setAllLists(allLists) {
		console.log("setAllLists")
		console.log(this.state.searchByGenre)
		this.setState({ list: allLists })
		//document.body.style.backgroundColor = "red";  
	}

	filter(input) {
		let corresondingGenre = [];
		let filteredLists = listData.filter(

			(item1) => {
				var test;
				if (this.state.searchByGenre) {
					alert("--this.state.searchByGenre")
					//filterByGenre
					//& item1.properties.genre == input

					for (var i = 0; i < item1.properties.genre.length; i++) {
						if (item1.properties.genre[i].includes(input)) {
							corresondingGenre.push(item1);
							test = item1.properties.genre[i].indexOf(input) !== -1;

							return test;
						}
						this.setState({ list: corresondingGenre })
					}

				} else {
					//searchByTitle
					alert("--default")
					test = item1.title.indexOf(input.charAt(0).toUpperCase()) !== -1;
				}
				return test;
			})
		console.log("filterdLists:")
		console.log(filteredLists)
		console.log("corresondingGenre:")
		console.log(corresondingGenre)
		//alert(JSON.stringify(filteredLists))
		this.setState({ list: filteredLists })

	}

	removeInput() {
		console.log("removeInput    ")
		console.log(this.state.searchByGenre)
		this.setState({ searchInput: "", showDeleteButton: false, searchByGenre: false })
		document.getElementById("searchField").disabled = false;
		this.filter(this.state.searchInput)
	}

	render() {
		//alle 's komen in deze array, zodat ze gefilterd kunnen worden OBV title.
		if (this.state.list === undefined || this.state.list.length == 0 && this.state.searchInput == "") {
			//init list
			console.log("render ")
			console.log(this.state.searchByGenre)
			this.filter(this.state.searchInput)
		}

		return (
			<div class={style.list_container}>
				<input class={style.searchBar} type="text" id="searchField" placeholder={this.state.searchInput} onBlur={this.startSearch.bind(this)} ></input>

				{
					this.state.searchByGenre ?
						<h1>ja</h1>
						:
						<h1>nee</h1>
				}
				{
					this.state.showDeleteButton ?
						<button class={style.deleteButton} onClick={() => this.removeInput()}>Remove</button>
						: null
				}
				{
					this.state.list.map((item, index) => {
						return <div>
							<p>{item.title}</p>
						</div>
					})
				}
			</div>
		);
	}
}

Answer 1

Вы можете изменить функцию поиска,

//search
startSearch(input) {
    const { value } = input.target
    const { searchInput } = this.state

    if (!this.state.searchByGenre) {
        this.setState(prevState => ({
            searchInput: prevState.searchInput = value,
            showDeleteButton: prevState.showDeleteButton = true,
  }))

    JSON.stringify(value) !== '' ? this.filter(value) : this.startFilter(searchInput)
    }
}

Answer 2

SetState - асинхронная операция, которая принимает функцию обратного вызова. Я подозреваю, что ваша вторая функция запускается до завершения первого SetState.

Кроме того, вы сами модифицируете DOM. Вы должны позволить React сделать это за вас, просто изменив состояние. Сейчас у меня нет времени, чтобы написать пример, но, надеюсь, это поможет.