时间戳

首页 > 解决方案 > this.props.route.params 返回值未定义

firebase - this.props.route.params 返回值未定义

问题描述

我正在构建一个条形码阅读器应用程序，它扫描该二维码，然后获取数据并用作从 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>
 );}}

应用程序.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)  , });

它没有用。我会很感激你的帮助。

标签： firebasereact-nativereact-native-androidreact-native-navigationreact-native-firebase

解决方案

尝试直接从道具使用项目，而不是从状态

在您的 componentDidMount 调用中，您从 state 提供已扫描密钥，从 props 提供

 firebase.database().ref(`product/${this.props.route.params.item}`)....

您还可以直接在构造函数内部的状态中调用this.props而不是props，它可以直接访问它，这就是为什么您可以调用super(props)而不是super(this.props)的原因，我不确定这是否是这个问题，但在反应文档中说不要复制道具来声明，因为它们被忽略了，我的朋友这是不好的做法。

检查此链接，在大黄色注释中我所指的是 https://reactjs.org/docs/react-component.html#constructor

推荐阅读