javascript - 类型错误 : TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params.name' )

Question

我知道也有类似的问题，但我还是尝试了，但仍然找不到解决方案。

我有一个登录屏幕、注册、聊天和一个测试屏幕(我只是用它来尝试修复此错误)我想传递从登录/注册中获得的姓名、电子邮件和头像数据，但它返回给我的是该对象未定义。仅当我将导航设置如下时才更正错误:登录或注册>聊天。但是，我不想这样做，我需要单击图像并直接进入此聊天。显然这是一个常见的错误，但我对尝试修复它感到沮丧(我是 React-Native 的新手)

聊天.js

import { GiftedChat } from "react-native-gifted-chat"; // 0.3.0

import firebaseSvc from "../FirebaseSvc";

type Props = {
  name?: string,
  email?: string,
  avatar?: string
};

class Chat extends React.Component<Props> {
  constructor(props) {
    super(props);
  }
  static navigationOptions = ({ navigation }) => ({
    title: (navigation.state.params || {}).name || "Chat!"
  });

  state = {
    messages: []
  };

  get user() {
    return {
      name: this.props.navigation.state.params.name,
      email: this.props.navigation.state.params.email,
      avatar: this.props.navigation.state.params.avatar,
      id: firebaseSvc.uid,
      _id: firebaseSvc.uid // need for gifted-chat
    };
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={firebaseSvc.send}
        user={this.user}
      />
    );
  }

  componentDidMount() {
    firebaseSvc.refOn(message =>
      this.setState(previousState => ({
        messages: GiftedChat.append(previousState.messages, message)
      }))
    );
  }
  componentWillUnmount() {
    firebaseSvc.refOff();
  }
}

export default Chat;

登录.js

import { Constants, ImagePicker, Permissions } from "expo";
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  View,
  Button,
  ImageEditor,
  Image,
  StatusBar,
  LayoutAnimation
} from "react-native";
import firebaseSvc from "../FirebaseSvc";
import firebase from "firebase";
import { auth, initializeApp, storage } from "firebase";
import uuid from "uuid";

class Login extends React.Component {
  state = {
    name: "",
    email: "",
    password: "",
    avatar: ""
  };
  // using Fire.js
  onPressLogin = async () => {
    console.log("pressing login... email:" + this.state.email);
    const user = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      avatar: this.state.avatar
    };

    const response = firebaseSvc.login(
      user,
      this.loginSuccess,
      this.loginFailed
    );
  };

  loginSuccess = () => {
    console.log("login successful, navigate to chat.");
    this.props.navigation.navigate("TelaTeste", {
      name: this.state.name,
      email: this.state.email,
      avatar: this.state.avatar
    });
  };
  loginFailed = () => {
    console.log("login failed ***");
    alert("Login failure. Please tried again.");
  };

  onChangeTextEmail = email => this.setState({ email });
  onChangeTextPassword = password => this.setState({ password });

  render() {
    LayoutAnimation.easeInEaseOut();

    return (
      <View style={styles.container}>
        <KeyboardAvoidingView behavior="padding">
          <Text style={styles.titulo}>{"CUDDLE"}</Text>

          <View style={styles.errorMessage}>
            {this.state.errorMessage && (
              <Text style={styles.error}>{this.state.errorMessage}</Text>
            )}
          </View>

          <View style={styles.form}>
            <View>
              <Text style={styles.inputTitle}>Email Address</Text>
              <TextInput
                style={styles.input}
                autoCapitalize="none"
                onChangeText={this.onChangeTextEmail}
                value={this.state.email}
              ></TextInput>
            </View>

            <View style={{ marginTop: 32 }}>
              <Text style={styles.inputTitle}>Password</Text>
              <TextInput
                style={styles.input}
                secureTextEntry
                autoCapitalize="none"
                onChangeText={this.onChangeTextPassword}
                value={this.state.password}
              ></TextInput>
            </View>
          </View>

          <TouchableOpacity style={styles.button} onPress={this.onPressLogin}>
            <Text style={{ color: "#FFF", fontWeight: "500" }}>Sign in</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={{ alignSelf: "center", marginTop: 32 }}
            onPress={() => this.props.navigation.navigate("Register")}
          >
            <Text style={{ color: "#414959", fontSize: 13 }}>
              New to SocialApp?{" "}
              <Text style={{ fontWeight: "500", color: "#5B2B80" }}>
                Sign Up
              </Text>
            </Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  titulo: {
    color: "#5B2B80",
    fontSize: 30,
    fontWeight: "bold",
    textAlign: "center",
    marginTop: 150
  },
  errorMessage: {
    height: 72,
    alignItems: "center",
    justifyContent: "center",
    marginHorizontal: 30
  },
  error: {
    color: "#5B2B80",
    fontSize: 13,
    fontWeight: "600",
    textAlign: "center"
  },
  form: {
    marginBottom: 48,
    marginHorizontal: 60
  },
  inputTitle: {
    color: "#8A8F9E",
    fontSize: 10,
    textTransform: "uppercase"
  },
  input: {
    borderBottomColor: "#8A8F9E",
    borderBottomWidth: StyleSheet.hairlineWidth,
    height: 40,
    fontSize: 15,
    color: "#161F3D"
  },
  button: {
    marginHorizontal: 60,
    backgroundColor: "#5B2B80",
    borderRadius: 4,
    height: 52,
    alignItems: "center",
    justifyContent: "center"
  }
});

export default Login;

App.js

import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
import Chat from "./components/Chat";
import TelaTeste from "./components/TelaTeste";
// Import React Navigation
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

const AppNavigator = createStackNavigator({
  Login: { screen: Login },
  CreateAccount: { screen: CreateAccount },
  Chat: { screen: Chat },
  TelaTeste: TelaTeste
});

export default createAppContainer(AppNavigator);

Answer 1

更改，使用箭头函数，user() 内的 this 指的是不同的东西

get user() {
  return {
    name: this.props.navigation.state.params.name,
    email: this.props.navigation.state.params.email,
    avatar: this.props.navigation.state.params.avatar,
    id: firebaseSvc.uid,
    _id: firebaseSvc.uid // need for gifted-chat
  };
}

至

user = () => {
  return {
    name: this.props.navigation.state.params.name,
    email: this.props.navigation.state.params.email,
    avatar: this.props.navigation.state.params.avatar,
    id: firebaseSvc.uid,
    _id: firebaseSvc.uid // need for gifted-chat
  };
}