如何卸载组件上的React-setState()?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

在我的ReactiveComponentim中,当Ajax请求正在进行时,im试图实现一个简单的旋转器--im使用状态来存储加载状态。

由于某种原因,下面这段代码在我的Reaction组件中抛出了这个错误。

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

如果我摆脱了第一个setState调用,错误就会消失。

constructor(props) {
  super(props);
  this.loadSearches = this.loadSearches.bind(this);

  this.state = {
    loading: false
  }
}

loadSearches() {

  this.setState({
    loading: true,
    searches: []
  });

  console.log('Loading Searches..');

  $.ajax({
    url: this.props.source + '?projectId=' + this.props.projectId,
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
      this.setState({
        loading: false
      });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
      this.setState({
        loading: false
      });
    }.bind(this)
  });
}

componentDidMount() {
  setInterval(this.loadSearches, this.props.pollInterval);
}

render() {

    let searches = this.state.searches || [];


    return (<div>
          <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>Name</th>
              <th>Submit Date</th>
              <th>Dataset &amp; Datatype</th>
              <th>Results</th>
              <th>Last Downloaded</th>
            </tr>
          </thead>
          {
          searches.map(function(search) {

                let createdDate = moment(search.createdDate, 'X').format("YYYY-MM-DD");
                let downloadedDate = moment(search.downloadedDate, 'X').format("YYYY-MM-DD");
                let records = 0;
                let status = search.status ? search.status.toLowerCase() : ''

                return (
                <tbody key={search.id}>
                  <tr>
                    <td>{search.name}</td>
                    <td>{createdDate}</td>
                    <td>{search.dataset}</td>
                    <td>{records}</td>
                    <td>{downloadedDate}</td>
                  </tr>
                </tbody>
              );
          }
          </Table >
          </div>
      );
  }

为什么我会得到这个错误(因为它是从ComponentDidMode调用的),我认为在组件挂载后设置状态是安全的?

提问于
用户回答回答于

如果您正在使用其他不允许您取消异步函数(已经提交给某个处理程序)的异步API,则可以执行以下操作:

if (this.isMounted())
     this.setState(...

这将消除您在所有情况下报告的错误消息。

热门问答

腾讯云GPU服务器不能联外网吗?

小爱同学

腾讯云 · 技术支持 (已认证)

推荐
腾讯云GPU服务器可连外网,GPU 云服务器提供和标准CVM 云服务器一致的方便快捷的管理方式。 图片.png GPU云服务器作为CVM云服务器的一类特殊实例,购买、 操作、维护等方式与CVM云服务器一致 图片.png GPU 云服务器(GPU Cloud Computin...... 展开详请

win服务器怎么给文件夹配置755权限?

推荐
下面以腾讯云win服务器(Windows Server 2016 数据中心版 64位中文版)为文件夹配置755权限为例 1.右击【属性】 图片.png 2 .选择【安全】- 【编辑】 图片.png 3. 可对当前文件进行755权限配置 图片.png 要修改某个文件的权...... 展开详请

腾讯云sdk 兼容JDK6?

推荐

如果你说的是https://cloud.tencent.com/document/sdk/Java的话,jdk最低版本是1.7,不支持1.6

android 离线推送 为什么setOfflinePushListener不回调?

嗨喽你好摩羯座
推荐
您好,使用云通信 IM SDK 的通知栏提醒,建议参考:https://cloud.tencent.com/document/product/269/9234 中的描述来操作,通知栏提醒的内容由类 TIMOfflinePushNotification 来定义,可以通过这个类对外...... 展开详请

为什么cmq的topic配置订阅者为queue,向topic发送消息无法到达queue?

是的, 向topic发送消息应该会立即投递到订阅者。您可以检查您配置的队列名称是否正确且是真实存在的队列。如还不能解决您的问题,您可以点击控制台右上角的“工单”,进行问题进一步的排查,腾讯云会有专业的售后24小时为您服务。

脏字过滤只支持 TIMTextElem 消息,对自定义消息无效,请问有接口可以主动检查吗?

学生路人
推荐
您好,脏字检查的内容包括单聊和群组消息(只检查文本消息 TIMTextElem,不支持对自定义消息 TIMCustomElem 的过滤)、群名片、群组资料(群名称、群简介、群公告)用户资料和好友关系链中 bytes 类型的数据(如昵称、好友备注和好友分组等)。目前没有这样的接口喔...... 展开详请

所属标签

扫码关注云+社区