我使用React Native Camera来扫描条形码,现在我正在尝试在条形码与数据库中的项目进行检查时显示模态。
我收到的错误是:
Error: checkBarcode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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,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
关于javascript - 渲染没有返回任何内容。这通常意味着缺少 return 语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66845950/