我正在构建一个条形码阅读器应用程序，该应用程序扫描qr码，然后获取数据，并用作从firebase获取对象的密钥。为了将数据用作密钥，我需要通过另一个屏幕，但当我检查控制台日志时，会发现扫描的密钥未定义。
本身的条形码扫描仪工作得很好。条形码类别：
export class BarCodeScannerScreen extends Component{
state = {
CameraPermissionGranted: null,
}
async componentDidMount() {
// Ask for camera permission
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ CameraPermissionGranted: status === "granted" ? true : false });
};
barCodeScanned = ({ data }) => {
//Access the Data
alert(data); // shows the scanned key
this.props.navigation.navigate('Info', {
item: data, }); // but then it's dissapears in here.
};
render(){
const { CameraPermissionGranted } = this.state;
if(CameraPermissionGranted === null){
// Request Permission
return(
<View style={styles.container}>
<Text>Please grant Camera permission</Text>
</View>
);
}
if(CameraPermissionGranted === false){
// Permission denied
return (
<View style={styles.container}>
<Text>Camera Permission Denied.</Text>
</View>
);
}
if(CameraPermissionGranted === true){
// Got the permission, time to scan
return (
<View style = {{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarCodeScanner
onBarCodeScanned = {this.barCodeScanned }
style = {{
height: DEVICE_HEIGHT/1.1,
width: DEVICE_WIDTH,
}}
>
</BarCodeScanner>
</View>
);
}
}
}
这是我接收信息的信息屏幕：
export default class InfoScreen extends Component {
constructor(props){
super(props);
this.state={
productlist:[],
scannedkey: this.props.route.params.item
} }
async componentDidMount(){
firebase.database().ref(`product/${ this.state.scannedkey}`).on(
"value",
(snapshot) => {
var list = [];
snapshot.forEach((child) => {
list.push({
key: child.key,
title: child.val().title,
//details: child.val().details,
//price: child.val().price
});
});
this.setState({ productlist: list });
},
(error) => console.error(error)
);
}
componentWillUnmount() {
if (this.valuelistener_) {
this.valueRef_.off("value", this.valuelistener_)
}}
render() {
console.log(this.state.scannedkey); // console log shows that scanned key is undefined
return(
<View style={styles.container}>
<Text>Hey</Text>
<Text>{this.state.productlist.title}</Text>
</View>
);}}
App.js
export default function App() {
const Drawer=createDrawerNavigator();
return (
<Provider store={store}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Barcode">
<Drawer.Screen name="Barcode" component={BarCodeScannerScreen} />
<Drawer.Screen name="Info" component={InfoScreen} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
);
}
我通常使用函数组件来导航，但对于类组件，这对我来说有点棘手。也许我错过了什么？
到目前为止，我已经尝试过：
this.props.navigation.navigate('Info', {
item: JSON.stringify(data) , });
但它没有起作用。我将感谢你的帮助。
尝试直接从道具中使用物品，而不是从状态中使用
在您的componentDidMount调用中，从state提供scannedKey，从props 提供
firebase.database().ref(`product/${this.props.route.params.item}`)....
你也在构造函数中直接在你的状态中调用this.props，而不是props构造函数可以直接访问它，这就是为什么你可以调用super(props(而不是super，这是不好的做法，我的朋友。
检查这个链接，在黄色的大纸条上我引用了什么https://reactjs.org/docs/react-component.html#constructor