12

UPDATED

DESCRIPTION

I have a listener on a Realm Object for getting updates. When there is an update on the server (or in the client) the function provided to the listener calls setState({}).

The strange part is that even if the console says that everything is ok, and it shows that the render method was called with correct data, I can't see any updates to my app.

If I tap on the screen randomly (after 1s,2s, 20s...) the UI magically updates and everything is correct.

If I do the same setState with a function called from a button it works, I guess because the animation of the button triggers the UI update.

Thanks for reading this.

STEP TO REPRODUCE

You have to update the server_url and credential in order to work.

react-native init test npm install realm react-native link realm

Since realm is not ready for 64-bit you must also be sure t compile only in 32bit in order to avoid app crashing when launched

use this code:

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>
    );
  }
}

Schema.js

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

Package.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"
  }
}

Some other strange things :

  • If I remote debug js to react native debugger (on Windows, but I guess is the same) the problem disappears.
  • The same thing happens on 3 different devices( 2 real, 1 emulator)
4

3 回答 3

6

就我而言，我只是停止调试器（CMD+D），然后那种奇怪的行为就消失了。 在此处输入图像描述

于 2020-12-22T18:05:24.557 回答
2

更新 2

setState({}) 在侦听器回调中时不起作用。我刚刚做了一个测试，更改了 Home.js 的 componentDidMount 中的代码，这样就可以了。

它不起作用，因为您没有绑定调用它的方法。它超出了组件上下文，因此 setState 不存在。

做

   openRealmAndLogin = (realm_user) => {...}

而不是常规函数，因为这个函数会将函数绑定到上下文。例如，您也可以在构造函数中绑定它（但据我所知，您已经在为其他函数做类似的事情 - 所以最好保持一致）

于 2019-05-12T09:19:41.247 回答
1

我建议您更改元素的键；这将迫使它重新加载发生的任何事情。

前任：

{
  articoli.map(articolo => {
    const isLoved = connectedUserData.loved_articles.filtered("id = $0", articolo.id ).length
    const isLiked = connectedUserData.liked_articles.filtered("id = $0", articolo.id ).length
    const numCommenti = articolo.commenti.length

    return (
      <SchedaArticolo
        key={ `ALL_${articolo.id}_${isLoved}_${isLiked}_${numCommenti}` }
        articolo={articolo}
        isLoved={isLoved}
        isLiked={isLiked}
        numCommenti={numCommenti}
      />
    )
  })
}
于 2019-05-11T14:47:38.380 回答