使用模糊.js和表格进行模糊搜索?反应JS

Question

所以我正在尝试使用 Fuzzy 进行模糊搜索，但它非常慢，而且似乎我的状态没有按时更新。这是一个包含所有内容的CodeSandbox，这是我的应用程序.js的片段：

const uuidv4 = require('uuid/v4');
var fuzzy = require('fuzzy');
console.log(fuzzy)
var searching = false;
class App extends Component {
constructor(props){
super(props);
this.state = {
searchWord: "",
searchMatches: []
}
this.fuzzySearch = this.fuzzySearch.bind(this);
this.handleChange = this.handleChange.bind(this);
}
//fuzzy search
fuzzySearch () {
var list = keywords.keywords;
var options = {
pre: '<b>'
, post: '</b>'
, extract: function(el) { return el.action; }
};
var results = fuzzy.filter(this.state.searchWord, list, options);
var matches = results.map(function(el) { return el.string; });
this.setState({searchMatches: matches});
console.log(this.state.searchMatches);
// [ '<b>a<c>o<n>ing', 'a mighty <b>ear <c>a<n>oe' ]
}
handleChange(event) {
this.setState({searchWord: event.target.value});
this.fuzzySearch()
}

render() {
const labelId = uuidv4();
return (
<div>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
<div className="form">
<Search handleChange={this.handleChange} searchWord={this.state.searchWord}/>
<WordTable searchMatches={this.state.searchMatches}/>
</div>
</div>
);
}
}
class Search extends Component {
constructor(props){
super(props);
this.state = {
}
}
render () {
return (
<div id="searchDiv">
<input id="searchBar" type="text" placeholder="Search Keyword and/or Action..." value={this.props.searchWord} name="searchWord" onChange={this.props.handleChange}/>
</div>
);
}
}
class WordTable extends Component {
constructor(props) {
super(props);
this.results = this.results.bind(this);
}
results() {
console.log("result");
console.log(this.props.searchMatches.length)
if(this.props.searchMatches.length > 0){
var matches = this.props.searchMatches;
return (
matches.map(p => 
<Row key={uuidv4()} action={p.action} keyword={p.keyword}/>
)
)
} else {
return(
keywords.keywords.map(p => 
<Row key={uuidv4()} action={p.action} keyword={p.keyword}/>
)
)
}
}

render () {
return (
<div id="table">
<table>
<thead>
<tr>
<th>Action</th>
<th>Keyword(s)</th>
</tr>
</thead>
<tbody>
{/*console.log(keywords.keywords[0])}
{keywords.keywords.map((keyword, action) => 
<Row keyword={keywords.keywords.keyword} action={keywords.keywords.action}/>
)*/
this.results()
}
</tbody>
</table>
{JSON.stringify(this.props.actions, null, " ")}
</div>
);
}
}
class Row extends Component {
render () {
return (
<tr>
<td key={uuidv4()} value={this.props.action}>{this.props.action}</td>
<td key={uuidv4()} value={this.props.keyword}>{this.props.keyword}</td>
</tr>
)
}
}
export default App;

我不确定为什么我的搜索使我的 React 应用程序变慢，似乎也没有matches或searchMathes变量/状态按时更新，但会不会只是console.log在做一些时髦的事情？我是 React 和 JS 的新手，所以任何关于正在发生的事情或你认为可能发生的事情的解释都会有很大帮助。

除了搜索速度非常慢之外，我的结果不会显示在我的WordTable表中。关于为什么的任何想法？

以及对我的 JSON 的解释，我使用的实际文件中有 6000+ 个对象，看起来像

{ "action": "this-is-the-action", "keyword": "this is the keyword"}

我只是在我在那里制作的CodeSandbox中随机放置了一些，但是这个想法是不同的keyword有重复的action。我希望这能更好地解释这一点。谢谢！

Answer 1

您最初的解决方案有很多问题。

1. 正如我在评论中所说，this.setState是异步/批处理的

以后

this.setState({ searchWord: event.target.value })
this.fuzzySearch()

可能(又名可能不会(工作。为什么？因为this.setState(...)和访问fuzzySearchthis.state.searchWord之间的时间足够短，以至于 React 可能还没有协调新状态。

2. 你的WordTable组件超级不稳定。您正在传递一个string[]，但它需要原始对象(形状类似于{ action: string, keyword: string }(。如果没有匹配项，您还会重新渲染所有选项......不确定这是否是预期的行为，但它使它看起来一切都匹配，而实际上什么都没有。

与其说是优化，不如说是一个

3. 真正的问题，但计算和存储过滤列表真的没有意义 - 只需计算它并在searchWord更改后将其作为道具传递。这也消除了 #1 中的竞争条件。

这是一个实现上述所有内容的工作示例(稍微清理了一下(。