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

如何解决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>
 );}}

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),});

它没有用。 我将非常感谢您的帮助。

解决方法

尝试直接从 props 使用 item，而不是从 state 使用

在你从 state 提供 scanKey 的 componentDidMount 调用中，从 props 提供它

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

您还直接在构造函数内的状态中调用 this.props 而不是 props，它可以直接访问它，这就是为什么您可以调用 super(props) 而不是 super(this.props)，我不确定这是否是问题，但在 react 文档中说不要将 props 复制到 state 因为它们被忽略了，这是我朋友的坏习惯。

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