Использование поиска в реагировать JS

Question

Я хочу фильтровать контент на основе введенного ввода, я не знаю, где я ошибся.Всякий раз, когда я набираю свой ввод, он просто не фильтрует контент, а показывает весь контент там.

  function searchingFor(searchingTerm) {
        return function(x){
            console.log("searching",x);
            return x.name.toLowerCase().includes(searchingTerm.toLowerCase())|| searchingTerm;
        }
    }

    class Main extends React.Component{

        componentWillMount(){
            this.props.fetchTopicsTableContent(this.state.sortBy,'ASC',0,this.props.match.params.Occupation).then(result=> (this.setState({rows:result.payload.data})))
            this.props.countTableContent(this.props.match.params.Occupation).then(result=>(this.setState({count:result.payload})));
        }

        constructor(props){
            super(props);

            this.state={
                searchTerm:"",
                rows:""
            }
        }

    searchHandler(e){
            this.setState({searchTerm:e.target.value})
            // console.log("rows",this.state.rows)
            {this.state.rows.filter(searchingFor(this.state.searchTerm)).map(item=>{
                console.log(item);
                 // this.setState({rows:item})
            })}
        }

    render(){
        return(
            <form>
               <input type="text"
                  value={this.state.searchTerm}
                  onChange={this.searchHandler.bind(this)}
                />
            </form>);}}

Answer 1

Ваша searchingFor() функция неверна.Внесите предоставленные изменения:

this.state.rows
.filter(item => item.name.toLowerCase().indexOf(searchingTerm.toLowerCase()) > -1)
.foreach(item => console.log(item));

Вы можете использовать оператор распространения для сохранения данных

Answer 2

Оператор JavaScript ||определяется как возвращение левого значения, если оно возвращает истинное значение, в противном случае правильное значение вместо того, чтобы возвращать само значение true.Поэтому попробуйте заменить

return x.name.toLowerCase().includes(searchingTerm.toLowerCase())|| searchingTerm;

на

return x.name.toLowerCase().includes(searchingTerm.toLowerCase())|| false;

Answer 3

this.setState({searchTerm:e.target.value}) #setState - асинхронная операция, и если вы хотите завершить действие, как завершатся эти операции.

Вы должны использовать функцию обратного вызова, как для аргумента 2d: this.setState({searchTerm:e.target.value}, () => {...here is your code})