Question

我有一个输入字段，我检查了onChange的验证。在更改事件中，我触发一个操作，说：MyActions.checkUsername()，以便我同时查看是否已经使用了用户名。

问题是当我检查商店以查看验证响应时，我得到上一个请求的响应值。因为它是异步的。

那么在React with Flux中解决这个问题的理想方法是什么？

Answer 1

一种可以帮助缓解问题的技巧可能是使用lodash的debounce方法，这样您就不会对检查进行垃圾邮件。

在下面的粗略示例中，我使用了lodash的去抖动，这样异步检查只会在安静500ms后触发（即用户停止输入500ms后）。

例如：

import { debounce } from 'lodash';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.checkUser = debounce(this.checkUser.bind(this), 500 /*ms*/);
  }

  checkUser(value) {
    // fire async check
  }

  render() {
    return (
      <form>
        <input onChange={this.checkUser} />
      </form>
    );     
  }
}

这可能无法完全缓解问题，但可以尝试一下。在进行更复杂的解决方案之前，您也可以尝试延长去抖时间。

如果您不想将lodash添加为依赖项，那么您可以编写自己的debounce。这是一个例子：

https://davidwalsh.name/javascript-debounce-function

如何确保Store中的响应属于React / Flux的最新请求

1 个答案: