事件像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，但只发射一次

回答

相关问题