在 React JS 中过滤搜索

Question

我在根据我的输入搜索过滤数据时遇到问题...我的目标是搜索 'M' 并查看包含 'M' 的所有负载数据的列表，当我接近确切的字符串 'Matt' 仅显示 'Matt' 的有效负载数据，并且基本上能够按 first_name、last_name 或 number 进行搜索。在此先感谢您，我们将不胜感激任何反馈！我一直卡在这个>_<

我正在使用自定义组件库并尝试进行基本搜索和过滤，问题不在于自定义库，而在于过滤功能。它似乎没有检索 v.first_name 值。我也对任何其他类型的过滤器库/方法开放。

我在搜索框 UI 组件中输入了字母 'M' 并得到了每个控制台日志语句的以下输出

import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS } from '../../actions/keys';
import { users } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';

import {
    LumosTheme,
    Grid, Form, Icon, Container, Loader
} from '@CustomLibrary/core';

class SearchBar extends Component {

    state = {
        responseData: " ",
        handle: true,
        query: "",
        filterValues: []
    };

    searchString = this.state.query;
    responseData = this.props.Users.data;

    componentDidMount() {
        this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users).then(() => {
            return this.setState({
                handle: false
            })
        })
    }
    handleInputChange = (value) => {
        console.log("In HandleInputFunction, Value= ", value) // Output of value is 'M'
        this.setState({query:value}, () => {
            console.log("In HandleInputFunction, query= ", this.state.query) // Output of query is 'M'
            this.filterArray();
        }
        )
    }
    filterArray = () => {
        console.log('In Filter fxn')
        let searchString = this.state.query;
        let responseData = this.props.Users.data;
        console.log('This is the responseData in Filter: ', responseData); // output of responseData is '(6)[{...},{...},{...},{...},{...},{...}]'  
        console.log('This is my filterValues in Filter: ', this.state.filterValues); //output of filterValues is '[]'
        console.log('This is my searchString in Filter: ', searchString) //output of searchString is 'M'



            if(searchString.length > 0){
                const filterData  =  _.filter(this.state.responseData, (v) =>  v.first_name  === searchString);
                console.log('This is my filterData in loop: ',filterData) //output of filterData is '[]'

                this.setState({
                      filterValues : filterData
                })
                console.log('This is my filterValues in loop: ', this.state.filterValues) //output of filterValues is '[]'
            }

    }
    // for now this drop down 'searchByOptions' is hard coded and just here for UI visual purposes, what I want to do later is depending on the option the user choses I pass the correct payload. 
    searchByOptions = [
        { label: 'Name or number', value: 'NAME/number' },
        { label: 'Distribution List', value: 'DL' },
        { label: 'Database Schema or Table', value: 'DB' },
        { label: 'Role', value: 'Role' }
    ];
    render() {

        if (this.state.handle) {
            return <Loader />
        }
        else {
            return (
                <LumosTheme>
                    <Container width='1379px'>
                        &nbsp;&nbsp;
                    </Container>
                    <Container width='1379px'>
                        <Grid paddingTop='10px'>
                            <Form.Item width='380px'>
                                <Form.Dropdown
                                    options={this.searchByOptions}
                                    defaultOption={this.searchByOptions[0]}

                                />
                            </Form.Item>
                        </Grid>
                        <Grid flexWrap="wrap" width='1000px'>
                            &nbsp;
                            < Form.SearchBox placeholder='Search' icon={<Icon.SearchRounded />}
                                userSelectOnClick
                                openOnClick
                                onSearch={this.handleInputChange}
                                value={this.state.query}
                            >
                                <Form.SearchList >
                                {this.state.responseData ?
                                    this.state.filterValues.map(item => (
                                        <Form.SearchOption
                                            value={item.first_name}
                                        />
                                        )):'null'}
                                </Form.SearchList>
                            </ Form.SearchBox>
                        </Grid>
                    </Container>
                </LumosTheme>
            )
        }
    }
}
const mapStateToProps = state => {

    return {
        Users: state.users
    }
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar);

我的负载被正确获取，看起来像这样

0: {id:1, first_name: "Matt", last_name: "Jones", number:"123",}
1: {id:2, first_name: "Alex", last_name: "Lee",   number:"675",}
2: {id:3, first_name: "Adam", last_name: "Khan",  number:"733",}
3: {id:4, first_name: "Sue", last_name:  "Kid",   number:"248",}
4: {id:5, first_name: "Jade", last_name: "Smith", number:"907",}
5: {id:6, first_name: "Luca", last_name: "James", number:"125",}

Answer 1

看起来您正在与该过滤条件进行完全匹配。

您可以使用 _.filter(this.state.responseData, (v) => v.first_name.includes(searchString));.

专业提示：一旦你使用了 lodash，就再也回不去了……这并不押韵，但你明白了。

在 React JS 中过滤搜索

Filter Search in React JS

filter

search-box

reactjs