如何解决渲染没有返回任何内容这通常意味着缺少 return 语句
我使用 React Native Camera 来扫描条形码,现在我正在尝试在条形码与数据库中的项目进行检查时显示模态。
我得到的错误是:
错误:checkBarcode(...):渲染没有返回任何内容。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null。
我应该怎么做才能让它发挥作用。我做错了什么?
代码:
CheckBarcode(scanResult) {
const product = DataBase.find((codeMetadata) => {
return codeMetadata.id === scanResult.data;
});
if (this.barCodeRead) {
if (product) {
this.barCodeRead = false;
this.setModalVisible(true);
return (
<View>
<Text>{product.company}</Text>
<Text>{product.name}</Text>
<Text>{product.gluten}</Text>
<Text>{product.ingredients}</Text>
<Text>{product.id}</Text>
</View>
);
} else {
this.barCodeRead = true;
return (
<View>
<Text>Produkten finns inte</Text>
</View>
);
}
}
}
模态:
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
this.setModalVisible(!modalVisible);
}}
>
<View
style={{
flex: 1,justifyContent: "center",alignItems: "center",backgroundColor: "rgba(0,0.8)",}}
>
<View
style={{
backgroundColor: "#fff",padding: 35,borderRadius: 10,width: "80%",height: "80%",}}
>
<View
style={{
borderTopWidth: 1,borderTopColor: "#000",marginBottom: 10,}}
>
<this.CheckBarcode />
</View>
<View>
<TouchableOpacity
style={{}}
onPress={() => {
this.setModalVisible(!modalVisible);
this.barCodeRead = true;
}}
>
<Text style={{ alignSelf: "center",color: "#FF0000" }}>Skanna</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
解决方法
您需要从组件中的渲染函数返回一些 JSX。如果不想在 UI 上显示任何内容,可以返回 null
。一个例子:
if (this.barCodeRead) {
if (product) {
return (
<View>
<Text>{product.company}</Text>
</View>
);
} else {
return (
<View>
<Text>Produkten finns inte</Text>
</View>
);
}
}
return <div>No Data to show</div> // or null
,
我自己修好了。通过暂停项目,我意识到解决问题是多么容易。
this.state = {
modalVisible: false,company: [],name: [],gluten: [],ingredients: [],id: [],}
checkBarcode(scanResult) {
const product = DataBase.find((codeMetadata) => {
return codeMetadata.id === scanResult.data;
});
if (this.barCodeRead) {
if (product) {
this.barCodeRead = false;
this.setState({
modalVisible: true,company: [product.company],name: [product.name],gluten: [product.gluten],ingredients: [product.ingredients],id: [product.id],});
} else {
}
}
}
,
尝试更改以下代码,因为如果 barCodeRead 具有 null 值,则必须返回 JSX 或 null
CheckBarcode(scanResult) {
const product = DataBase.find((codeMetadata) => {
return codeMetadata.id === scanResult.data;
});
if (this.barCodeRead) {
if (product) {
this.barCodeRead = false;
this.setModalVisible(true);
return (
<View>
<Text>{product.company}</Text>
<Text>{product.name}</Text>
<Text>{product.gluten}</Text>
<Text>{product.ingredients}</Text>
<Text>{product.id}</Text>
</View>
);
} else {
this.barCodeRead = true;
return (
<View>
<Text>Produkten finns inte</Text>
</View>
);
}
} else {
return (
<View>
<Text>No product</Text>
</View>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。