Ошибка типа: _this.props.editAp не является функцией

Question

Я пытаюсь вызвать функцию editAp на забавной c. js странице со страницы Edit1. js, и мне не удается устранить эту ошибку. Код для развлечения c. js:

import firebase from "firebase";
if (!firebase.apps.length) {
  firebase.initializeApp({});
}
export default function editAp(email, password, keyis) {
  return (dispatch) => {
    firebase.database().ref("/users1").child(keyis).update({ email, password });
  };
}

код для редактирования1. js -

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  StatusBar,
  View,
  Text,
  TextInput,
  Button,
  Alert,
  ScrollView,
} from "react-native";
import { editAp } from "../pages/func";
import firebase from "firebase";
if (!firebase.apps.length) {
  firebase.initializeApp({});
}
class Edit1 extends Component {
  state = {
    email: this.props.navigation.state.params.email,
    password: this.props.navigation.state.params.password,
    keyis: this.props.navigation.state.params.keyis,
  };
  submit1 = () => {
    console.log(this.props.navigation.state.params.keyis);
    console.log(this.state.email, this.state.password, this.state.keyis);
    this.props.editAp(this.state.email, this.state.password, this.state.keyis);
    this.setState({
      email: "",
      password: "",
      keyis: "",
    });
    Alert.alert("Action!", "user updated");
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Edit Here</Text>
        <TextInput
          style={{
            marginTop: 20,
            height: 40,
            borderColor: "gray",
            borderWidth: 1,
          }}
          onChangeText={(email) => this.setState({ email })}
          value={this.state.email}
        />
        <TextInput
          style={{
            marginTop: 20,
            height: 40,
            borderColor: "gray",
            borderWidth: 1,
          }}
          onChangeText={(password) => this.setState({ password })}
          value={this.state.password}
        />
        <TextInput
          style={{
            marginTop: 20,
            height: 40,
            borderColor: "gray",
            borderWidth: 1,
          }}
          onChangeText={(keyis) => this.setState({ keyis })}
          value={this.state.keyis}
        />
        <Button title="Submit" onPress={this.submit1} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#fff",
    padding: 30,
  },
});
export default Edit1;

Ошибка, которую я получаю, - TypeError: _this.props. editAp это не функция. (В «_this.props.editAp (_this.state.email, _this.state.password, _this.state.keyis)», «_this.props.editAp» не определено) Я пытаюсь вызвать функцию на этой странице, но не удалось решить.

Это страница, с которой я получаю ключ, адрес электронной почты и пароль для страницы Edit1. js.

    import React,{Component} from 'react';
import {  Platform, StyleSheet, StatusBar, View, Text, TouchableOpacity, FlatList, TouchableHighlight, ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import firebase from 'firebase';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
if (!firebase.apps.length) {    firebase.initializeApp({}); }
class EditApollo extends Component {
  constructor(props){
    super(props);
    this.state={      users1:[]    }      }
  componentDidMount= () =>{
    firebase.database().ref('users1').once('value').then(snapshot => {
       var items = [];
       snapshot.forEach((child) => {
         items.push({
            keyis: firebase.database().ref().push().getKey(),
            email: child.val().email,
            password: child.val().password,
         });
      });
      this.setState({ users1: items});
      console.log('you',this.state.users1)
  });  }
   render() {
  return(
   <View style={styles.container}>
   <ScrollView>
   <FlatList style={{width:'100%'}}
data={this.state.users1}
keyExtractor={(elem)=>elem.key}
showsVerticalScrollIndicator={false}
renderItem={elem => (<View style={{elevation:8, width: 350, marginBottom:13, borderRadius:15, backgroundColor:'#575FCF', padding:15 }}>
  <Text style={{fontSize:18, fontWeight:'bold', color:'#fff'}}>{elem.item.email}</Text>
  <Text style={{fontSize:18, fontWeight:'bold', lineHeight:20, color:'#fff'}}>{elem.item.password}  </Text>
    <View style={{flexDirection:'row', justifyContent:'flex-end', marginTop:15 }}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('Edit1',{...elem.item})}>
          <View style={{marginRight:15}}>
            <Icon size={25} color="white" name="edit" />
      </View>      </TouchableHighlight>        
      <TouchableHighligh>
          <View>                <Icon size={25} color="white" name="close" />          </View>
      </TouchableHighlight>            </View>
  </View>)}
/>
</ScrollView>
</View>
)}}
const styles = StyleSheet.create({
  container: {
 padding:10,
justifyContent:'center',
alignItems: 'center',
backgroundColor: '#fff',
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: 200,
 },
 item:{
backgroundColor: 'skyblue',
justifyContent: 'center',
    alignItems: 'center',
    flex : 1,
    margin: 1,
    height:50
 },
})
export default EditApollo;

Answer 1

В вашем коде не одна, а пара проблем.

1) Вы экспортировали свою функцию по умолчанию, но импортируете ее в {}

2) Это Функция util, которая не привязана к props, но вы выполняете this.props.editAp

3) Неправильное использование Dispatch, фактически она вообще не используется. Вы пытаетесь использовать утилиту в качестве действия.

Пожалуйста, попробуйте следующий код и сообщите мне, если вы обнаружите какие-либо проблемы

fun c. js

import firebase from 'firebase';

if (!firebase.apps.length) {
  firebase.initializeApp({});
}

export function editAp(email, password, keyis) {
 firebase.database().ref('/users1').child(keyis).update({ email, password })
}

edit1. js

import React, { PureComponent } from 'react';
import { StyleSheet, View, Text, TextInput, Button, Alert } from 'react-native';
import firebase from 'firebase';

import { editAp } from '../pages/func';

if (!firebase.apps.length) {
  firebase.initializeApp({});
}

export default class EditScreen extends PureComponent {

  state = {
    email: this.props.navigation.state.params.email,
    password: this.props.navigation.state.params.password,
    keyis: this.props.navigation.state.params.keyis,
  };

  _submit = () => {
    const { email, password, keyis } = this.state;

    editAp(email, password, keyis);

    this.setState({
      email: '',
      password: '',
      keyis: '',
    });

    Alert.alert('Action!', 'user updated');
  };

  render() {
    const { email, password, keyis } = this.state;

    return (
      <View style={styles.container}>
        <Text>Edit Here</Text>
        <TextInput
          style={{ marginTop: 20, height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={email => this.setState({ email })}
          value={email}
        />
        <TextInput
          style={{ marginTop: 20, height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={password => this.setState({ password })}
          value={password}
        />
        <TextInput
          style={{ marginTop: 20, height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={keyis => this.setState({ keyis })}
          value={keyis}
        />
        <Button title="Submit" onPress={this._submit} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 30,
  },
});

Answer 2

Опечатка или неправильный импорт. Вы возвращаете значение по умолчанию как функцию. Поэтому возврат импорта будет функциональным.

Использование:

import editAp  from "../pages/func";

Иначе экспорт как:

function editAp(email, password, keyis) {
  return (dispatch) => {
    firebase.database().ref("/users1").child(keyis).update({ email, password });
  };
}
export { editAp }