javascript - 如何在 React Native 中从不同文件(无类/组件)调用组件函数

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

这是我的主屏幕组件

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

这是我的笔记编辑组件:

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

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

我已经尝试在 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 来返回一个 promise

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

你可以改变你的更新函数来返回一个 promise

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

这将解决您的问题。