Question

）

我正在编写Notes应用程序。导航回主屏幕时（远离“音符编辑组件”），将保存音符。注释标题列表（在主屏幕中）在WillFocus上更新。问题在于便笺保存是异步的，需要一些时间...因此onWillFocus在保存便笺之前更新列表。现在，我想在笔记保存解析后手动调用列表更新。但是我不知道该怎么做。

我有一个db文件，所有数据库功能都存在其中。还有两个组件。现在，我需要从db文件中调用HomeScreen组件中的一个函数。

那是我的数据库文件（已删除其他功能）

//db imports and making a const db

export function updateNote(updateStuff) {
  db.get(_id).then(function(doc) {
    return db.put({
      //updateStuff
    });
  }).then(async function(response) {
    console.log(response)
    //here i need to call the function
  }).catch(function (err) {
    console.log(err);
  });
}

这是我的HomeScreen组件

import React from 'react';
import {
  //all elements
} from 'react-native';
import { NavigationEvents } from 'react-navigation';

import { putNote, getAllNotes, deleteAllNotes } from './db/db.js';

export default class HomeScreen extends React.Component {
  state = {
    notes: [],
  }

  async renderAllNotes() {
    let result = await getAllNotes();
    this.setState({notes: result.rows});
  }

  render() {

    return (
      <View style={styles.container}>
        <NavigationEvents
          onWillFocus={() => this.renderAllNotes()}
        />

      <FlatList

         //Flat List Code

        /> 
      </View>
    );
  }
}

这是我的Note Edit组件：

import React from 'react';
import {
  //stuff
} from 'react-native';


import { updateNote, getNote, getAllNotes } from './db/db.js';

export default class NoteScreen extends React.Component {
  state = {
    _id: this.props.navigation.getParam('_id'), 
  }

  updateThisNote() {
    updateNote(this.state._id, this.state.title, this.state.content, this.state.createdAt);
  }

  componentWillUnmount() {
    this.updateThisNote();
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({ title: text })}
          value={this.state.title}
        />
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({ content: text })}
          value={this.state.content}
        />

        <Button
          title='update Note'
          onPress={() => this.updateThisNote()}
        />
      </View>
    );
  }
}

，现在在updateNote解析时应调用renderAllNotes。

我已经尝试在db文件中导入HomeScreen类并调用该函数，以及尝试导出render allNotes函数并将其导入db文件中。没有成功;（

谢谢您的帮助；）

编辑：

async putNoteAndPushRoute() {
    let resolve = await putNote("");
    this.props.navigation.navigate('Note', {
      _id: resolve.id,
      renderAllNotes: this.renderAllNotes.bind(this),
    });
  }

错误消息：_this2.props.renderAllNotes不是函数

Answer 1

您可以将this.renderAllNotes()传递到您的编辑组件。

喜欢这个。

...
renderAllNotes(){
      ....
  }
...
render() {
    const { navigate } = this.props.navigation;
    return (
         <View>
            <Button onPress={() =>{
                  navigate('Edit',{
                      renderAllNotes: this.renderAllNotes.bind(this)
                  });
            }} />
         </View>
    )
}

...

然后在您的编辑内容中，您可以在更新注释后仅调用renderAllNotes。但是您需要更改updateNote才能返回承诺

 updateThisNote(){
// Make sure your updateNote returns a promise
        updateNote(this.state._id, this.state.title, 
 this.state.content, this.state.createdAt)
.then(() => {
const { params} = this.props.navigation.state;
params.renderAllNotes();
});
 }

 componentWillUnmount() {
    this.updateThisNote();
 }

您可以更改更新功能以返回承诺

export function updateNote(updateStuff) {
return new Promise(function(resolve, reject) {
  db.get(_id).then(function(doc) {
    return db.put({
      //updateStuff
    });
  }).then(async function(response) {
    console.log(response)
     //resolve it here
     resolve();
  }).catch(function (err) {
    console.log(err);
  });
   }
}

这可以解决您的问题。

如何在ReactNative

1 个答案: