android - 在 Realm 监听器回调中调用 setState 时，直到点击屏幕后 UI 才会更新

Question

已更新

描述

我在 Realm Object 上有一个监听器来获取更新。当服务器(或客户端)有更新时，提供给监听器的函数调用 setState({})。

奇怪的是，即使控制台显示一切正常，并且显示使用正确的数据调用了渲染方法，我也看不到我的应用有任何更新。

如果我随机点击屏幕(1 秒、2 秒、20 秒后......)，UI 会神奇地更新，一切都是正确的。

如果我对从按钮调用的函数执行相同的 setState，它会起作用，我猜是因为按钮的动画会触发 UI 更新。

感谢阅读本文。

复制步骤

您必须更新 server_url 和凭据才能工作。

react-native 初始化测试npm 安装 Realm react native 链接 Realm

由于 realm 还没有为 64 位准备好，您还必须确保只在 32 位编译以避免应用程序在启动时崩溃

使用这段代码:

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import Realm from 'realm'

import { SERVER_URL } from "./config/realm";
import { Utente } from "./config/schema";


export default class App extends Component {

  loginAsync = async () => {

    var realm_user = Realm.Sync.User.current

    if(!realm_user){
      const credentials = Realm.Sync.Credentials.usernamePassword('admin', '******' ,false);
      realm_user = await Realm.Sync.User.login(SERVER_URL, credentials);
    }

    const config = realm_user.createConfiguration({
      schema: [
        Utente, 
        Realm.Permissions.Permission,
        Realm.Permissions.User,
        Realm.Permissions.Role],
      schemaVersion: 1,
    });

    this.realm = new Realm(config);


    var connectedUserData = this.realm.objects("Utente").filtered("id = $0", realm_user.identity)
    connectedUserData.subscribe()


    connectedUserData.addListener((connectedUserData)=>{

      if(connectedUserData[0]){
        this.setState({
          connectedUserData: connectedUserData[0]
        })
      }

    })

  }

  constructor(props){
    super(props)

    this.loginAsync()

    this.state = {
      connectedUserData: {
        nome: 'not loaded'
      }
    }

  }



  render() {
    return (
      <View style={styles.container}>
        <Text>{ this.state.connectedUserData.nome }</Text>
      </View>
    );
  }
}

架构.js

export const Utente = {
    name: "Utente",
    primaryKey: "id",
    properties: {
        id: "string",
        nome: 'string?',
        permissions: '__Permission[]'
    }
}

包.json

{
  "name": "testBaseRealm",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.7",
    "realm": "^2.27.0-rc.3"
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/runtime": "7.4.4",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

一些其他奇怪的事情:

• 如果我远程调试 js 以响应 native 调试器(在 Windows 上，但我猜是一样的)，问题就会消失。
• 同样的事情发生在 3 台不同的设备上(2 台真实设备，1 台模拟器)

Answer 1

在我的例子中，我只是停止了调试器 (CMD+D)，然后那个奇怪的行为就消失了。