在ReactJS中搜索部分字符串

Question

我是新的反应，并继承了一个应用程序，我需要理解，而不得不做一些修改。这里的问题是，当一个人搜索"微"字时;只返回一个Micro的列表，当期望是微软和任何其他公司，包括术语Micro将返回，我如何做到这一点?

这是我的代码搜索结果组件

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>
);
}
}

Answer 1

只是添加评论区讨论的答案。看来您的search方法将从search/product返回的任何内容绑定回组件状态:

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

所以看起来你的过滤器在反应中很好。我猜你没有得到"微软"的原因是当你用"微"字过滤的时候是你的SQL查询或存储过程正在使用等于'='而不是LIKE语法。