javascript - TypeError: undefined is not an object (evalating 'this.state.Gas') in React Native
问题描述
在 react native 中开发应用程序时,我尝试使用客户端数据和产品类型发出动态警报,但是当我尝试构建连接字符串的变量时,我收到此错误。
TypeError: undefined is not an object (评估 'this.state.Gas')
这是我的代码的相关部分:
使成为:
render() {
return (
<ScrollView style={styles.container}>
<Text style={styles.Titulo}>Pide tu cilindro!</Text>
<View style={styles.cuadros}>
<View style={styles.gas}>
<Image
source={require("./assets/licuado-2kg.png")}
style={{ height: 170, width: 170 }}
/>
</View>
<View style={styles.texto}>
<Text style={styles.cilindros}>GASCO 2 kg</Text>
<TouchableOpacity
style={styles.btnpedir}
onPress={this.confirm}
>
<Text style={styles.pedir}>Pedir</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
}
构造函数:
constructor(props) {
super(props);
this.state = {
email: "",
displayName: "",
Ciudad: "",
Comuna: "",
Direccion: "",
Gas: "GASCO 2 kg"
};
}
功能:
confirm() {
let variable = this.state.Gas
let datos = this.state.displayName + this.state.Ciudad + this.state.Comuna + this.state.Direccion
let texto = "Deseas confirmar el pedido de: ".concat(variable, " a: ", datos)
Alert.alert(
"Confirmar pedido",
texto,
[
{
text: "Confirmar",
onPress: () => console.log("Confirmar"),
},
{
text: "Editar datos",
onPress: () => console.log("Editar"),
},
{
text: "Cancelar",
onPress: () => console.log("Cancelar"),
style: "cancel",
}
],
{ cancelable: false }
);
}
组件DidMount:
componentDidMount() {
const { email, displayName } = firebase.auth().currentUser;
this.setState({ email, displayName });
firebase
.firestore()
.collection("Users")
.where("Email", "==", email)
.get()
.then((snapshot) => {
this.setState({ Doc: snapshot.docs[0].id });
firebase
.firestore()
.collection("Users")
.doc(this.state.Doc)
.get()
.then((doc) => {
this.setState({
Ciudad: doc.data().City,
Direccion: doc.data().Direction,
Comuna: doc.data().Comuna,
});
});
});
};
我该如何解决这个问题?
解决方案
我认为你应该绑定确认功能。
onPress={this.confirm.bind}
https://reactjs.org/docs/faq-functions.html#how-do-i-bind-a-function-to-a-component-instance
推荐阅读
- prestashop - 通过 php 脚本降低产品价格
- repl.it - Repl.it 登录未经授权
- azure - Azure Kubernetes - 单节点,两个副本:端口问题?
- python - 如何使用 Python 将 µ 写入文本文件
- prometheus - 在 PromQL/MetricsQL 中按时间分组和聚合
- javascript - 在子组件中调用函数未在反应 js 中设置父状态
- vue.js - In Vue, when do child components render?
- python - Changing the user input statement if repeated exceptions
- angular - Can't bind to 'ngIf' since it isn't a known property of 'ng-container', Can't bind to 'ngIfElse' since it isn't a known property of 'ng-container'
- cordova - Http and Https calls not working after Cordova upgrade