时间戳

首页 > 解决方案 > ComponentWillMount ReactJS 上的无限循环

javascript - ComponentWillMount ReactJS 上的无限循环

问题描述

我正在尝试在 Salesforce 上使用 ReactJS，但查询非常有问题

看看这段代码，试图做一些很酷的事情来获取所有数据，但时间并没有停止，不知道为什么，请帮助我，随时问我任何问题

componentWillMount(){
    let queryMore = true
    let offSet = 0
    let contents = []
    while(queryMore) {
      makeDeferredProvider()
      let contentObject = SObjectModel.deferredObject('Content')     
      let retrieveOptions = {
        limit: 10,
        where: { 
          Type__c: { eq: 'Image' }
        }
      }      
      offSet > 0 ? retrieveOptions.offset = offSet : ''      
      let contentPromise = contentObject.retrieve(retrieveOptions)
      contentPromise.then( records => {        
        records.forEach( record => {
          let item = {
            'name': record.get('Name'),
            'id': record.get('Id')
          }
          contents.push(item)
        })        
        records.length = 10 ? offSet += 10 : queryMore = false        
      }, error => {
        console.log(error)
      })
    }
    this.setState({
      contents: contents
    })
  }

标签： javascriptreactjssalesforce

解决方案

Async React 将来会让这更容易，但现在你需要在你的 Promise 解析时不要阻塞渲染。

这是一个高级解决方案：

  1. 停止使用 ComponentWillMount。它正在被弃用。
  2. 停止使用 while 循环。它不会与你的承诺一起工作。先让它工作，然后再担心 queryMore 。见下文。
  3. 在组件状态中添加一个名为“正在加载”的字段，并将其默认为 true。
  4. 当“加载”等于 true 时，在您的渲染方法中有一个条件来加载微调器（或 NULL 或其他东西）。
  5. 在 ComponentDidMount* 中，调用您的请求逻辑并在检索所有内容后在传递给 .then 方法的函数内设置状态。确保在此处将“正在加载”设置为 false。
  6. 然后渲染中的条件应该渲染内容。

考虑使用 JSForce ( https://jsforce.github.io/ ) 连接到您的对象。它已经包含 autoFetch 逻辑，可以替换您的 queryMore 逻辑。

* 使用 ComponentDidMount 应该可以工作，但这可能是个坏主意，因为该组件将在每次渲染时调用 SF。您可能应该使用处理程序，并且仅在您没有处于状态的数据或出于其他原因想要刷新时才调用。

推荐阅读