return 渲染中没有任何内容。这通常意味着缺少 return 语句
Nothing was returned from render. This usally means a return statement is missing
我使用 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>
您需要 return 一些 JSX 来自组件中的渲染函数。如果您想在 UI 处不显示任何内容,可以 return 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
尝试更改以下代码,因为您必须 return JSX 或 null 如果 barCodeRead 具有空值
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>
);
}
}
我自己修好了。通过暂停项目,我意识到解决问题是多么容易。
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 {
}
}
}
我使用 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>
您需要 return 一些 JSX 来自组件中的渲染函数。如果您想在 UI 处不显示任何内容,可以 return 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
尝试更改以下代码,因为您必须 return JSX 或 null 如果 barCodeRead 具有空值
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>
);
}
}
我自己修好了。通过暂停项目,我意识到解决问题是多么容易。
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 {
}
}
}