Question

我想在用户填写React组件中的表单时执行自动保存。自上次onChange事件发生3秒后，应触发ajax调用。

下面的代码灵感来自an instructive article，其中显示了如何使用setTimeout和clearTimeout完成此操作。但是我在React实现中做错了 - 输入时没有遵守3秒的延迟。

这里有什么想法吗？或者我对于如何解决这个问题一共都错了？

class Form extends Component {
  constructor() {
    super();
    this.state = {
      isSaved: false
    };
    this.handleUserInput = this.handleUserInput.bind(this);
    this.saveToDatabase = this.saveToDatabase.bind(this);
  }
  saveToDatabase() {
    var timeoutId;
    this.setState({isSaved: false});
    if (timeoutId) {
        clearTimeout(timeoutId)
    };
    timeoutId = setTimeout( ()  => {
        // Make ajax call to save data.
        this.setState({isSaved: true});
    }, 3000);
  }
  handleUserInput(e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value});
    this.saveToDatabase();
  }
render() {
  return (
    <div>
      {this.state.isSaved ? 'Saved' : 'Not saved'}
      // My form.
    </div>
  )
}

Answer 1

在saveToDatabase方法内，每次调用该方法时，您都会定义一个新的未定义的 timeoutId变量。这就是if语句永远不会被调用的原因。

相反，您需要调整变量的范围并在构造函数中创建类数据属性。

 constructor() {
   super();
   this.state = {
     isSaved: false
   };
   this.timeoutId = null;
   this.handleUserInput = this.handleUserInput.bind(this);
   this.saveToDatabase = this.saveToDatabase.bind(this);
 } 

 saveToDatabase() {
   this.setState({isSaved: false});
   if (this.timeoutId) {
     clearTimeout(this.timeoutId)
   };
   this.timeoutId = setTimeout( ()  => {
     // Make ajax call to save data.
     this.setState({isSaved: true});
   }, 3000);
 }

超时后自动保存到数据库

1 个答案: