用于弹性搜索的 reactjs 置换事件答案

【问题标题】：reactjs displaced events for elasticsearch用于弹性搜索的 reactjs 置换事件
【发布时间】：2016-02-02 12:32:25
【问题描述】：

我将 ElasticSearch 路由连接到我的 ReactJS 服务 CodeService.js。这样 API 就会在输入字段中的每个键被调用时被调用。这工作得很好。当我记录每个阶段时，我可以在网络和控制台中看到新对象得到了很好的处理。

而不是Order.jsx。我总是落后一键。当我打例如0 比我可以清楚地看到 API 被调用并且它转到 CodeStore.js 但在 Order.jsx 中调用 this.getCodeState().options 提示：[] 直到我点击第二个键而不是获得我以前的商店版本和不是实际的。

我的假设是我的视图在 Store 更新之前被渲染。如何定位这种行为？

这是我的代码：

  export default class Order extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      options: []
    };
    this.props = {
      inputValue: '',
      options: []
    };
    this._onChange = this._onChange.bind(this);
  }

  handleHint(){
    return 'blahblahblha';
  }

  handleComplete(){
    alert('complete!');
  }

  _onChange(event) {
    var enteredChars = event.target.value;
    this.setState({inputValue: enteredChars});
    CodeService.nextCode(enteredChars);
  }

  getCodeState() {
    return {
      options: CodeStore.postcode
    };
  }

  render() {
    return (
      <div className="newer">[...])}

【问题讨论】：

标签： javascript api elasticsearch reactjs flux

【解决方案1】：

我可以通过添加 componentDidMount 并添加 eventchangelistener 来修复它。

componentDidMount() {
  CodeStore.addChangeListener(this._onChange);
}

唯一需要考虑的是，您需要在 _onChangeevent 中添加一个条件，否则您有一个无限循环

【讨论】：