タイムアウト後のデータベースへの自動保存

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); 
}