Javascript 我正在使用“成功显示我的数据”；withObservables（）；方法，但它'；It’我在西瓜中的成分仍然没有反应

大家好

在中，您可以使用

withObservables（）

方法使组件响应，它将在每次数据更改时更新或重新呈现组件

在我的代码中

import fs from 'react-native-fs';
import {Database} from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import schema from '../schema/watermelon.schema';
import userModel from './user.model';
import customerModel from './customer.model';
// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  schema,
  dbName: `${fs.DocumentDirectoryPath}/restronic`, // optional database name or file system path
  // migrations, // optional migrations
  synchronous: true, // synchronous mode only works on iOS. improves performance and reduces glitches in most cases, but also has some downsides - test with and without it
  // experimentalUseJSI: true, // experimental JSI mode, use only if you're brave
});

// Then, make a Watermelon database from it!
const db = new Database({
  adapter,
  modelClasses: [userModel, customerModel],
  actionsEnabled: true,
});

export default db;

我已经将基本用户数据存储到WatermelonDB中，当我使用

console.log（）

时，结果是：

{
  "__changes": {
    "_isScalar": false, 
    "_value": [Circular], 
    "closed": false, 
    "hasError": false, 
    "isStopped": false, 
    "observers": [], 
    "thrownError": null
  }, 
  "_hasPendingDelete": false, 
  "_hasPendingUpdate": false, 
  "_isCommitted": true, 
  "_isEditing": false, 
  "_raw": {
    "_changed": "", 
    "_status": "created", 
    "city": "NY City", // The data that I added
    "id": "rddcv3ttt9s03jel", // The data that I added
    "name": "John Doe", // The data that I added
    "user_id": 0 // The data that I added
  }, 
  "_subscribers": [], 
  "collection": {
    "_cache": {
      "map": [Map], 
      "recordInsantiator": [Function anonymous], 
      "tableName": "user"
    }, 
    "_subscribers": [], 
    "changes": {
      "_isScalar": false, 
      "closed": false, 
      "hasError": false, 
      "isStopped": false, 
      "observers": [Array], 
      "thrownError": null
    }, 
    "database": {
      "_actionQueue": [ActionQueue], 
      "_actionsEnabled": true, 
      "_isBeingReset": false, 
      "_resetCount": 0,
      "_subscribers": [Array], 
      "adapter": [DatabaseAdapterCompat], 
      "collections": [CollectionMap], 
      "schema": [Object]
    }, 
    "modelClass": [Function User]
  }
}

使用

withObservables（）

方法，我可以显示这些数据，下面是我的代码：

import React, {useEffect, useState} from 'react';
import {Button, Layout} from '@ui-kitten/components';
import WATERMELON from '../models';
import util from '../utils';
import {View} from 'react-native';
import withObservables from '@nozbe/with-observables';
import {Text} from '../components/Helper';

const enhance = withObservables(['user'], props => {
  return {
    user: props.user,
  };
});

const UserBasicInfo = enhance(props => {
  // Successfully displaying the data but not Reactive
  return (
    <>
      <Text>{props.user.name}</Text> {/* John Doe */}
      <Text>{props.user.city}</Text> {/* NY City */}
    </>
  );
});

const TestScreen = props => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    (async () => {
      await WATERMELON.action(async () => {
        const user_collection = WATERMELON.collections.get('user');
        const fetch_userdata = await user_collection.find('rddcv3ttt9s03jel');
        console.log(fetch_userdata);
        setUser([fetch_userdata]);
      });
    })();
  }, []);

  return (
    <Layout>
      <View>
        <Text>Hello Test Screen!</Text>

        {user !== null && <UserBasicInfo user={user} />}

        <Button
          onPress={async () => {
            await WATERMELON.action(async () => {
              const user_collection = WATERMELON.collections.get('user');
              const userd = await user_collection.find('rddcv3ttt9s03jel');
              await userd.update(user => {
                // Just want to change the city
                // And it's just fine BUT not reactive :(
                user.city = 'Chicago';
              });
            });
          }}
        >
          Press It
        </Button>
      </View>
    </Layout>
  );
};

export default TestScreen;

我的模型/index.js文件

import fs from 'react-native-fs';
import {Database} from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import schema from '../schema/watermelon.schema';
import userModel from './user.model';
import customerModel from './customer.model';
// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  schema,
  dbName: `${fs.DocumentDirectoryPath}/restronic`, // optional database name or file system path
  // migrations, // optional migrations
  synchronous: true, // synchronous mode only works on iOS. improves performance and reduces glitches in most cases, but also has some downsides - test with and without it
  // experimentalUseJSI: true, // experimental JSI mode, use only if you're brave
});

// Then, make a Watermelon database from it!
const db = new Database({
  adapter,
  modelClasses: [userModel, customerModel],
  actionsEnabled: true,
});

export default db;

我不知道我的代码出了什么问题，我只是按照中的教程进行操作，但它仍然不是被动的：(

更新

import fs from 'react-native-fs';
import {Database} from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import schema from '../schema/watermelon.schema';
import userModel from './user.model';
import customerModel from './customer.model';
// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  schema,
  dbName: `${fs.DocumentDirectoryPath}/restronic`, // optional database name or file system path
  // migrations, // optional migrations
  synchronous: true, // synchronous mode only works on iOS. improves performance and reduces glitches in most cases, but also has some downsides - test with and without it
  // experimentalUseJSI: true, // experimental JSI mode, use only if you're brave
});

// Then, make a Watermelon database from it!
const db = new Database({
  adapter,
  modelClasses: [userModel, customerModel],
  actionsEnabled: true,
});

export default db;

我尝试了

.subscribe（）

方法，但仍然没有反应，更糟糕的是，当我

在该方法中设置state（）

时，它没有重新呈现组件，当我在该方法中尝试

console.log（）

时，该方法运行良好

const UserBasicInfo = props => {
  const [state, setState] = useState(props.user);

  useEffect(() => {
    const subscription = props.user.subscribe(newVal => {
      // Not re-rendering the component
      setState(newVal);
    });
    return () => subscription.unsubscribe();
  });

  return <>{state !== null && <Text>{state.name}</Text>}</>;
};

constuserbasicinfo=props=>{
const[state，setState]=useState（props.user）；
useffect（（）=>{
const subscription=props.user.subscripte（newVal=>{
//不重新渲染组件
设置状态（newVal）；
});
return（）=>subscription.unsubscripte（）；
});
返回{state！==null&&{state.name}；
};

添加'observe（）'最后，它会起作用

const enhance = withObservables(['user'], props => {

return {
    user: props.user.observe(),
  };
});