Поиск в реальном времени с использованием response.js из url api

Question

Я пытаюсь создать простое приложение поиска в реальном времени, чтобы узнать React.js. Я смог имитировать его с использованием фиктивных данных, но у меня возникают проблемы при попытке сделать то же самое с json из url/api. Я не хочу никакого события onClick, поэтому я использовал изменение состояния для поиска.

URL-адрес, с которого я буду получать данные должны быть как

URL = 'myurl/апи =' + 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. Это первый момент, когда у нас есть доступ к данным, которые пользователь набрал, поэтому он идеально подходит для вашей функции. Я бы также рекомендовал разучивать обработчик, чтобы ваши запросы не выполнялись для символов, которые пользователь на самом деле не собирался искать. Вот хорошая статья об debouncing: https://davidwalsh.name/javascript-debounce-function