错误：TypeError: undefined is not an object（评估'this.props'）。 react-native expo

Question

1. 这是我的 Login.js：

<View style={styles.container}>
  <Logo />
  <Form type="Login"/>
  <View style={styles.signupTextCont}>
    <Text style={styles.signupText}> D'ont have an account yet? </Text>
    <Text style={styles.signupButton}> Signup </Text>
  </View>
</View>

2. 这是我的 Signup.js：

<View style={styles.container}>
  <Logo />
  <Form type="Signup"/>
  <View style={styles.signupTextCont}>
    <Text style={styles.signupText}> Already have an account yet? </Text>
    <Text style={styles.signupButton}> Sign in </Text>
  </View>
</View>

3. 和我的 Form.js：

<View style={styles.container}>
  <TextInput style={styles.inputBox}
    underlineColorAndroid='rgba(0, 0, 0, 0)'
    placeholder= "Email"
    placeholderTextColor= "#ffffff"
  />
  <TextInput style={styles.inputBox}
    underlineColorAndroid='rgba(0, 0, 0, 0)'
    placeholder= "Password"
    secureTextEntry= {true}
    placeholderTextColor= "#ffffff"
  />

  <TouchableOpacity style={styles.button}>
  <Text style={styles.buttonText}>{this.props.type}</Text>
  </TouchableOpacity>
</View>

Answer 1

this.props.type has to be passed to the <text/> component from your global/app component (where your state object should sit) - using the browser's dev tools, look at your React components to see where your state object is.

使用 this 关键字将 props 数据从 global/app 组件传递给<text/>组件：

<text type={this.props.type}/>

如果您的组件被拆分为 individual.js 文件，请确保您的 global/app 组件可以使用模块导入/导出访问您的<text/>组件。

Answer 2

我的竞争对手不是 class 而是 function。 如果组件不是 class 我们不能使用 this.props。 解决方案是：在 Form 中添加类似 Form(props) 的道具，而不是 this.props.type，我们添加 juste props.type。