首頁猿問何時使用ReactisesetSt...

何時使用ReactisesetState回調(diào)

React.JS

慕姐4208626 2019-07-03 16:51:43

何時使用ReactisesetState回調(diào)當ReactiveComponent狀態(tài)發(fā)生變化時，將調(diào)用Render方法。因此，對于任何狀態(tài)更改，都可以在呈現(xiàn)方法主體中執(zhí)行操作。那么，對于setState回調(diào)是否有特定的用例？

查看完整描述

3 回答

達令說

TA貢獻1821條經(jīng)驗獲得超6個贊

是的，因為setState工作于asynchronous方式，道路。這意味著在打電話后setState這個this.state變量不會立即更改。因此，如果要在設(shè)置狀態(tài)變量的狀態(tài)后立即執(zhí)行操作，然后返回結(jié)果，則回調(diào)將非常有用。

考慮下面的例子

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

以上代碼可能無法按預期工作，因為title變量在對其執(zhí)行驗證之前可能沒有發(fā)生變異?，F(xiàn)在，您可能會想知道我們是否可以在render()函數(shù)本身，但是如果我們能夠在changeTitle函數(shù)本身中處理這個問題，它會更好，更干凈，因為這會使您的代碼更有組織性和可理解性。

在這種情況下，回調(diào)很有用。

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

另一個例子是當你想dispatch以及狀態(tài)改變時的行動。您將希望在回調(diào)中執(zhí)行此操作，而不是在render()因為它將被稱為每次重命名發(fā)生，因此許多這樣的場景是可能的，在那里您將需要回調(diào)。

另一個案例是API Call

當您需要根據(jù)特定的狀態(tài)更改進行api調(diào)用時，可能會出現(xiàn)這樣的情況，如果在呈現(xiàn)方法中這樣做，則在每次呈現(xiàn)時都會調(diào)用它。onState更改，或者是因為某些支持傳遞給了Child Component變化。

在這種情況下，您可能希望使用setState callback將更新的狀態(tài)值傳遞給api調(diào)用

....changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());},APICallFunction: function () {
  // Call API with the updated value}....

反對回復 2019-07-03

DIEA

TA貢獻1820條經(jīng)驗獲得超3個贊

在我的腦海中出現(xiàn)的1.用法是api調(diào)用，它不應該進入呈現(xiàn)，因為它將運行each狀態(tài)改變。而api調(diào)用應該只在特殊狀態(tài)變化時執(zhí)行，而不是在每一，每個渲染。

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)} performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });}