javascript - TypeError : _this. props.editAp 不是一个函数

Question

我试图从 Edit1.js 页面调用 func.js 页面中的函数 editAp，但无法解决此错误。 func.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 });
  };
}

edit1.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 页面的 key 、电子邮件和密码的页面。

    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 个问题，而是有几个问题。

1) 您已将函数导出为默认函数，但在 {}

中导入它

2) 这是一个 util 函数，未绑定(bind)到 props 但您正在执行 this.props.editAp

3) Dispatch 的错误使用，事实上它根本没有被使用。您正在尝试使用 util 作为操作。

请尝试以下代码，如果发现任何问题请告诉我

func.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,
  },
});