ReactJS：檢查狀態值並根據狀態更新渲染的最佳方法是什麼？

Question

所以，我有一個窗體，多個輸入更新狀態onChange。

我想要發生的事情是讓用戶更改值，當他們改變時，更新表格的state以保存這些更改。使用ES6類我的代碼：

super(props); 
this.state = { 
    post: this.props.content // this is an object {title: '', description: ''} 
} 

// I have all the methods below this.method = this.method.bind(this) up here. 
} 

handleTitle(title) { // gets title from input onChange event 
    let post = update(this.state.post, {title: {$set: title}}); // using import update from 'immutability-helper' for changing object 
    this.setState({post: post}); 
    this.checkPostApproval(); 
} // this all works, post is updated. I have the same code for description. 

checkPostApproval() { 
    // here I want to check the post values and make sure they are valid. 
    // and either allow or deny submission. 
    if (this.state.post['title'] && this.state.post['description']) { 
    this.setState({isApproved: true}); 
    } else { 
    this.setState({isApproved: false}); 
    } 
} 

問題：

當用戶設置的標題，然後描述，isApproved切換到真正的（我想）。但是，如果用戶將標題更改爲「」，則批准將保持爲真（不是我想要的）。如果用戶然後開始鍵入描述（批准切換爲false）。我相信這與組件的生命週期以及狀態的設定有關，但我不確定。

我不介意使用jQuery來檢查驗證，但我希望只是檢查輸入更改後的值，然後使用方法和道具更新帖子。

更新處於狀態的對象然後在各種輸入字段中使用onChange事件處理程序進行驗證的最佳做法方法是什麼？

最終，如果有任何無效輸入，我希望isApproved爲假。

Answer 1

請在setState回調（第二個參數）中運行批准後測試。 正如您已經注意到的那樣 - setState方法是異步的，組件狀態不會立即更新。

this.setState({post}, this.checkPostApproval) 

請參閱本說明從React's documentation about setState：

的setState（）不總是立即更新組件。它可能會批處理或推遲更新，直到稍後。這使得在調用setState（）之後立即讀取this.state是一個潛在的缺陷。相反，使用componentDidUpdate或setState回調函數（setState（updater，callback）），其中的任何一個在應用更新後都會被觸發。如果您需要根據之前的狀態設置狀態，請閱讀下面的updater參數。