Question

我将React-Native与Realm Database一起使用。
我试图使用 async / await 模式运行读取查询，但看起来它总是同步执行，冻结UI，因为查询需要至少几秒钟才能呈现（到期）可能存储的大量数据。）

这是我使用的代码（它是一个复制和粘贴，但为了给你一个想法），我错过了什么吗？

export default class CustomComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     value:0
   };
   this.realm = this.buildRealm();
 }

  buildRealm() {
        return new Realm({ schema: [EventSchema] });
 }

  componentWillMount() {
    this.fetchData().then(result => { this.setState(value:result);});
  }

  async fetchData() {    
    var appState = await someMethod()
    return appState;
  }

  someMethod() {
   return new Promise(resolve => {
         resolve(queryFromDB())
        });
  }

  queryFromDB() {
     // Returns a value fetched from Realm
     let events = this.realm.objects("Event");
     return events.length;
   }

  render() {
   return (
     <Text> {this.state.value} </Text> 
   );
  }
}

Answer 1

您是否曾尝试在componentDidMount而不是willMount上提取数据？

WillMount要求在安装开始之前完成您的功能。

然后，您可以添加加载UI状态（微调器，示例文本项等）。

然后可能会使您的state.value成为默认值，然后在查询完成时更新。

Answer 2

领域查询是同步的，无法使其异步。看起来您在React Native上使用领域，如果是这种情况，最好的解决方案是使用interaction manager

来推迟您的领域查询

import utils from '../../../utils';

const {
  email,
  strings,
  errors
} = utils;
const {
  init: error,
  BAD_REQUEST
} = errors;

const validate = (req, res, next) => {
  const {
    email: value
  } = req.body;

  return next();
};

export default {
  validate
}

首先，您的组件将挂载并渲染一个加载屏幕，然后在ui渲染线程完成工作后，交互管理器将触发领域查询。这样，用户就不会遇到太多的UI冻结。

我希望有一天realmJS团队会提供一个异步版本，但是我怀疑这会很快发生。

Answer 3

我已经用setTimeout解决了一段时间。例如：

componentDidMount() {
    setTimeout(this.fetchData.bind(this), 0);
}

fetchData(){
   let events = this.realm.objects("Event");
   this.setState({
       value: events,
   });
}

领域js运行查询异步

3 个答案: