reactjs替换了用于弹性搜索的事件

reactjs displaced events for elasticsearch

本文关键字:搜索 事件 替换 用于 reactjs      更新时间:2023-09-26

我将一个ElasticSearch路由连接到我的ReactJS服务CodeService.js。因此API get在输入字段中的每一个键命中时都会被调用。这很管用。当我记录这方面的每个阶段时,我可以在网络和控制台中看到新对象得到了很好的处理。

而不是在Order.jsx上。我总是落后一个按键。当我点击例如0时,我可以清楚地看到API被调用,它进入了CodeStore.js,但在Order.jsx中调用this.getCodeState().options会提示:[],直到我点击第二个键时,我得到的是我以前的Store版本,而不是实际的版本。

我的假设是,我的视图在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">[...])}

我能够通过添加componentDidMount和added和eventchangelistener来修复它。

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

唯一需要考虑的是,您在_onChange事件中需要一个条件,否则您将有一个无限循环