javascript - 在 ReactJS 中搜索部分字符串

Question

我是新来的反应，并且继承了一个我需要理解的应用程序，同时必须进行一些修改。这里的问题是，当一个人搜索“Micro”时只返回一个 Micro 列表，当期望返回 Microsoft 和任何其他包含 Micro 一词的公司时，我该如何实现呢？

这是我的 searchResult 组件代码

import React, {Component} from 'react';
import {PaginationControl} from "./PaginationControl";
import {SearchTable} from "./SearchTable";
import {Row, Col} from "reactstrap";
import './Search.css';

export class SearchResults extends Component {
    static defaultProps = {
        pageSize: 20
    }

    constructor(props) {
        super(props);
        this.state = {
            search: '',
            sort: null,
            filters: {},
            results: {
                items: [],
                page: 0,
                total: 0,
            },
            collection: 'software'
        };
    }

    componentDidUpdate(prevProps) {
        if ((prevProps.search !== this.props.search) ||
            (prevProps.collection !== this.props.collection) ||
            (prevProps.filters !== this.props.filters)) {
            this.search(0);
        }
    }

    async search(page) {
        let search = this.props.search;
        let collection = this.props.collection;
        if (search === null) {
            this.setState({
                results: {
                    items: [],
                    page: 0,
                    total: 0,
                },
                search: search,
            })
        } else {
            const request = {
                "search": search,
                "page" : page,
                "pageSize" : this.props.pageSize,
                "filter": this.props.filters,
                "sort": this.props.sort
            }
            let myCallback = this.setState.bind(this);
            fetch('search/product/' + collection,
                {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(request)
                }).then(function(response) {
                return response.json();
            }).then(function(data) {
                myCallback({results: data, search: search, collection: collection, loading: false});
            });
        }
    }

    selectPage(newPage) {
        this.search(newPage).then();
    }

    render() {
        return (
            <div>
                <Row style={{ padding: 10}}>
                    <Col>
                        <b>Search:</b> "<i>{this.state.search}</i>"
                        (TotalHits: {this.state.results.total})
                    </Col>
                    <Col md="auto">
                        <PaginationControl className="my-pagination" page={this.state.results.page}
                                           pageSize={this.props.pageSize} total={this.state.results.total}
                                           pageHandler={p => this.selectPage(p)}/>
                    </Col>
                </Row>

                <SearchTable data={this.state.results.items}
                             cart={this.props.cart}
                             cartHandler={this.props.cartHandler}
                             actions={['add', 'copy']}/>
                             
            </div>
        );
    }

}

这是 SearchTable 组件

import React, {Component} from 'react';
import {SearchRow} from './SearchRow';
import {ProductDetails} from './ProductDetails'

// Implementation of the Search Table
// To use <SearchTable data={results}></SearchTable>

export class SearchTable extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modal: false,
            inspectRow: null
        };
    }

    
    render() {
        let results = this.props.data;
        return (
            <div>  
            <table className='table table-striped' aria-labelledby="tableLabel">
                    <tbody>
                    {results?.map(row => <SearchRow key={row.bdnaId}
                                                    data={row}
                                                    onInspect={(r) => this.setState({modal: true, inspectRow: r})}
                                                    actions={this.props.actions}
                                                    cartHandler={this.props.cartHandler}/>)}
                    </tbody>
                </table>
                <ProductDetails modal={this.state.modal} toggleModal={() => this.setState({modal: !this.state.modal})} row={this.state.inspectRow}/>
            </div>
        );
    }

}

标签： javascriptreactjs

Answer 1

只需在评论部分添加讨论内容的答案即可。您的方法似乎将search返回的任何内容绑定search/product到组件状态：

then(function(data) {
    myCallback({results: data, search: search, collection: collection, loading: false})
}

所以看起来你的过滤器在反应上很好。我的猜测是，当您按“Micro”过滤时，您没有返回“Microsoft”的原因是您的 SQL 查询或存储过程使用的是 equals '=' 而不是LIKE语法。