Javascript 如何从ReactNative中的不同文件（无类/组件）调用组件函数

)

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

我有一个数据库文件，其中包含所有数据库函数。和两个组成部分。 现在我需要从db文件调用主屏幕组件中的函数

这是我的db文件（删除了其他函数）

这是我的主屏幕组件

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

---

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

您可以将

this.renderAllNotes（）

传递给编辑组件

像这样

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

您可以更改更新函数以返回承诺

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

---

这将解决您的问题。

从何处调用updateNote（）？从另一个文件调用组件方法来实现这一点是不可行的。考虑将这些道具传递给这个组件，或者使用像ReDux这样的状态管理体系结构，也可以在回溯到主页（堆栈布局）时，从注释编辑组件中在WeluntLoad生命周期挂钩中发布编辑组件调用更新注释。我怎样才能传递道具@JoelGullander等一下@sarmad非常感谢我会尽快试用；）@Sarmad此代码不可读。这个解决方案应该有效。确保你做的每件事都是正确的。您可以使用此代码或其他内容更新您的问题尝试使用此.props.navigation.getParam（“renderAllNotes”）访问函数，例如this.renderAllNotes=this.props.navigation.getParam（“renderAllNotes”）；然后使用这个；如果这不起作用，请尝试console.log您的导航对象…它应该在某处：），我也更新了我的答案，更新了此注释功能…请检查它芜湖此已修复；）非常感谢@Sarmadwelcome，您也可以批准或投票表决我的答案：）谢谢

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

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

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