时间戳

首页 > 解决方案 > 如何在 ReactNative 中从不同文件（无类/组件）调用组件函数

javascript - 如何在 ReactNative 中从不同文件（无类/组件）调用组件函数

问题描述

)

我正在编写一个笔记应用程序。导航回主屏幕（远离注释编辑组件）时会保存注释。笔记标题列表（在 HomeScreen 中）在 WillFocus 上更新。问题是笔记保存是异步的并且需要一些时间......所以 onWillFocus 在保存笔记之前更新列表。现在我想在注释保存解决时手动调用列表更新。但我不知道该怎么做。

我有一个数据库文件，所有数据库函数都在其中。还有两个组件。现在我需要从 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>
    );
  }
}

这是我的笔记编辑组件：

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 类并调用该函数，以及尝试导出渲染 allNotes 函数并将其导入 db 文件中。没有成功 ;（

谢谢你的每一个帮助；）

编辑：

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

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

标签： javascriptreact-native

解决方案

您可以将 传递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);
  });
   }
}

这将解决您的问题。

推荐阅读