陣營和終極版表格 - 防止重複請求表單時，第一個請求沒有解決尚未

Question

我在那裏，如果我點擊提交Redux的形式（第6節）兩次上做文章，很快，它會發送兩個操作，然後 - > ajax請求到我的服務器，這將創建一個重複的請求。

什麼是禁用「提交」按鈕，從表單條目被保存在數據庫中，並再次啓用該條目已被存儲後的最佳途徑。我嘗試了（disabled = {submitting}），它似乎並沒有像下面的例子那樣工作。有沒有很多的信息，所以我不正確地使用它？

class Timesheet extends Component { 
... 
    onSubmit(props) { 
    console.log('submitting', props); 
    createTimesheet(props); 
    } 


    render() { 

    const {handleSubmit, reset, submitting} = this.props; 

    return(
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     ... form details 
     <button type="submit" disabled={submitting} className="btn btn-primary">Submit</button> 
     </form> 
    ) 
    } 
} 

... 

const TimesheetForm = reduxForm({ 
    form: 'TimesheetNewForm', 
    enableReinitialize: true 
} 
, null, {createTimesheet})(Timesheet); 
... 

Answer 1

你onSubmit函數返回一個promise。

在這種情況下，this.props.submitting將在承諾解決之前變爲true。