javascript - 使用 Fuzzy.js 和表格进行模糊搜索？ ReactJS

Question

因此，我尝试使用 Fuzzy 进行模糊搜索，但速度非常慢，而且似乎我的状态没有按时更新。 Here is a CodeSandbox with everything ，这是我的 App.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 中放置了一些随机的，但想法是不同的关键字有重复的操作。我希望这能更好地解释这一点。谢谢!

Answer 1

您最初的解决方案存在一些问题。

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

以下，

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

可能不会(又名可能不会)工作。为什么？因为 this.setState(...) 和访问 fuzzySearch 中的 this.state.searchWord 之间的时间足够短，React 可能没有这样的时间。尚未协调新状态。

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

并不是真正一个问题，而是一个优化，但计算和存储过滤列表确实没有意义 - 只需计算它并将其传递为searchWord 更改后的 prop。这也消除了 #1 中的竞争条件。

Here's a working example实现上述所有内容(稍微清理一下)。