事件像componentDidUpdate，但只發射一次

我有一些組件應該儘快做一些工作，只要他們的數據第一次到達並呈現，但不是將來的重新渲染。例如：評論已加載並呈現，現在是1.加載社交媒體庫和2.加載一些Google Analytics。事件像componentDidUpdate，但只發射一次

現在我做這樣的：

componentDidUpdate: function (prevProps, prevState) { 
    if (this.hasAlreadyUpdatedOnce) { 
     // ... do some stuff... 
    } else { 
     // ... do some stuff that should happen only once... 
     // 1. load social media libraries 
     // 2. load some Google Analytics 
     this.hasAlreadyUpdatedOnce = true; 
    } 
}

但我問自己，如果有比設置一個這樣的屬性更優雅的方式。

來源

2015-02-09 kraftwer1

假設您正在響應狀態更改，您應該將回調作爲第二個參數傳遞給setState。

componentDidMount: function(){ 
    ajaxyThing(function(data){ 
    this.setState({data: data}, function(){ 
     // this.state is updated, the component has rerendered 
     // and the dom is current 
    }); 
    }.bind(this)); 
}

來源

2015-02-09 22:56:02 FakeRainBrigand

你想要componentDidMount()。 Details here.

來源

2015-02-09 21:15:30

但在'componentDidMount'，我的初始值ajax請求還沒有發生，這意味着DOM在那裏，但是是空的。我想要執行的操作要求DOM包含來自初始ajax請求的數據。或者我誤解了一些東西？ – kraftwer1 2015-02-09 21:22:13

您應該將數據加載到父組件中，並將其作爲道具傳遞，以便在安裝時可以獲取數據 – zackify 2015-02-09 22:39:25

您嘗試更新狀態，一旦ajax調用完成？或者您可以爲componentShouldUpdate返回false，並且一旦ajax調用promise已經解析了調用forceUpdate。

來源

2015-02-09 21:28:38 gor181

我不能給你一個明確的答案，因爲我不知道你的ajax調用是在父組件還是子組件中，但是你應該能夠利用shouldComponentUpdate()來實現你的目標。如果你真的不想在ajax調用進來之後更新你的組件，那麼你可以這樣做： shouldComponentUpdate（）{ return false; }

然後當你的ajax調用返回時，只需運行this.forceUpdate()。返回false將使其不會更新，除非您運行this.forceUpdate()。然而，這並不是解決這個問題的最佳方案，我不能在沒有更多信息的情況下提供更好的解決方案。

來源

2015-02-09 22:24:37 Ganonside

的React docs對如何處理這個使用isMounted()一個很好的例子。

isMounted()如果該組件被渲染到DOM中，則返回true，否則返回假值。您可以使用此方法來防止異步調用至setState()或forceUpdate()。

例

首先，初始化`getInitialState（）你的狀態變量「：

getInitialState: function() { 
    return { 
    username: '', 
    lastGistUrl: '' 
    } 
}

在componentDidMount()使Ajax調用（$.get在這種情況下），然後重新設置狀態變量：

componentDidMount: function() { 
    $.get(this.props.source, function(result) { 
    var lastGist = result[0]; 
    if (this.isMounted()) { 
     this.setState({ 
     username: lastGist.owner.login, 
     lastGistUrl: lastGist.html_url 
     }); 
    } 
    }.bind(this)); 
}

來源

2015-02-10 06:42:13

事件像componentDidUpdate，但只發射一次

回答

相關問題