使用 react.js 来自 url api 的实时搜索

Question

我一直在尝试创建一个简单的实时搜索应用程序来学习 React.js。我能够使用虚拟数据模拟它，但是在尝试使用来自 url/api 的 json 进行相同操作时遇到了问题。我不想要任何 onClick 事件，所以我使用状态更改来搜索。

我将从中获取数据的 url 应该是这样的

url = 'myurl/api='+searchString;

所以我希望在我输入内容时收集数据。这可能吗？

如果我可以在不包含任何 onClick 事件的情况下执行此操作，请告诉我。

这是我的fiddle：

var SearchStock = React.createClass({

  getInitialState: function() {
    return {searchString: '', data : []};
  },

  handleChange: function(e) {
    this.setState({searchString: e.target.value});
  },

  componentDidMount: function() {
    var url = 'myurl/api' + searchString;
    this.serverRequest = $.get(url, function(result) {
      var quote = result;
      this.setState({quote});
    }.bind(this));
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var stocks = this.props.items, searchString = this.state.searchString.trim().toLowerCase();
    // var stocks = this.state.data, searchString = this.state.searchString.trim().toLowerCase();

    if (searchString.length > 0) {
      stocks = stocks.filter(function(l) {
        return l[Object.keys(l)[0]]["symbol"].toLowerCase().match(searchString);
      });
    }

    return <div >
      < input type = "text" value = {this.state.searchString} onChange = {this.handleChange} placeholder = "Type here" / >
      < ul > 
      {stocks.map(function(l) {
            return <li > {l[Object.keys(l)[0]]["name"]} < /li>
        })
      } 
      < /ul> 
    < /div>;
  }
});

var stocks = [{"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}}];

// ReactDOM.render( < SearchStock />,document.getElementById('container'));
ReactDOM.render( < SearchStock items = {stocks}/>, document.getElementById('container'));

如果能得到任何帮助，我将不胜感激。如果任何地方有错误，请告诉我。 :)

Answer 1

您的示例只会在组件安装时发出搜索请求。这个特定的生命周期事件只会触发一次，当元素首次呈现给 DOM 时，请参阅：https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount.

有多种方法可以处理此类功能，我建议在 handleChange 方法中发出搜索请求。这是我们可以访问用户输入的数据的第一点，因此它非常适合您的功能。我还建议取消处理程序的抖动，这样您就不会请求用户实际上并不打算搜索的字符。这是一篇关于去抖动的好文章：https://davidwalsh.name/javascript-debounce-function

使用 react.js 来自 url api 的实时搜索

Real time search using react.js from url api

reactjs