Javascript 在react native中使用firebase进行搜索

我对本地和firebase都不熟悉。我想制作一个搜索栏，可以根据条形码值搜索firebase中的所有数据，但我在执行此操作时遇到了一些错误。我想我的代码在某个地方出错了，但不知道在哪里。我已将firebase凭据传输到dbConfig.js。这是我的firebase数据和代码：

import React,{Component} from 'react';
import { View, Text,TextInput,StyleSheet,Image, Button} from 'react-native';

import firebase from './dbConfig';

export default class ListItem extends Component {

render() {
        return (
<>

<View style={styles.BackGround}>
      <View style={styles.SectionStyle}>
    <Image
        source={require('./mic.png')} //mic image here
        style={styles.ImageStyle}
    />


    <TextInput
        style={{ flex: 1, justifyContent: 'center', textAlign: 'center', fontSize: 12}}
        placeholder="Search for Product"
        underlineColorAndroid="transparent"
        //onChangeText={(text) => this.setState({data: text})}
        onSubmitEditing = {(text)=> this.setState({data: text})}
        value = {this.state.data}
       // onSubmitEditing={()=>this._search}
        //onSubmitEditing={()=>this.componentWillMount}
    />
    <Image
        source={require('./usr.png')} //icon image here
        style={styles.ImageStyle2}
    />
</View>


             <View>
             <Text>{this.state.items}</Text> 
            </View>
</View>
            </>
        );
    }


    constructor(props){
      super(props);

     this.state= {
          items: '',
          data: '',

       };
      }
    componentWillMount(){


      var ref = firebase.database().ref('/');

      ref.child(this.state.data).on("value", snapshot =>{

      console.log(snapshot.val().info.Price);
//if(snapshot.val().Price == this.state.data){
//this.setState({items: Object.values(snapshot.val())});
//}
//else{
 //alert('there is problem');
//}
      });
    }

}


const styles = StyleSheet.create({



  BackGround: {
    backgroundColor: '#22abb6',
    height: '100%'



   },

   SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    // borderWidth: 0.8,
    // borderColor: '#000',
    shadowColor:'#176f75',

    marginTop: 50,
    height: 40,
    borderRadius: 10,
    margin: 10,
  },


  ImageStyle: {
    padding: 10,
    marginLeft: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
  },
  ImageStyle2: {
    padding: 10,
    marginLeft: 10,
    marginRight: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
  },


});

import React，{Component}来自'React'；
从“react native”导入{视图、文本、文本输入、样式表、图像、按钮}；
从“/dbConfig”导入firebase；
导出默认类ListItem扩展组件{
render（）{
返回(
this.setState（{data:text}）}
onSubmitEditing={（text）=>this.setState（{data:text}）}
值={this.state.data}
//onSubmitEditing={（）=>this.\u search}
//onSubmitEditing={（）=>this.componentWillMount}
/>
{this.state.items}
);
}
建造师（道具）{
超级（道具）；
此。状态={
项目：“”，
数据：“”，
};
}
组件willmount（）{
var ref=firebase.database（）.ref（'/'）；
ref.child（this.state.data）.on（“值”，快照=>{
log（snapshot.val（）.info.Price）；
//if（snapshot.val（）.Price==this.state.data）{
//this.setState（{items:Object.values（snapshot.val（））}）；
//}
//否则{
//警报（“有问题”）；
//}
});
}
}
const styles=StyleSheet.create({
背景：{
背景颜色：“#22abb6”，
身高：“100%”
},
截面样式：{
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#fff”，
//边框宽度：0.8，
//边框颜色：“#000”，
阴影颜色：'#176f75'，
玛金托普：50，
身高：40，
边界半径：10，
差额：10，
},
图像样式：{
填充：10，
边缘左：10，
差额：5，
身高：25，
宽度：25，
resizeMode:'拉伸'，
对齐项目：“居中”，
},
ImageStyle2：{
填充：10，
边缘左：10，
marginRight:10，
差额：5，
身高：25，
宽度：25，
resizeMode:'拉伸'，
对齐项目：“居中”，
},
});

我通过更改以下内容来实现：

 //adding this in TextInput

onSubmitEditing = {this.componentWillMount}



//on changing the function compoundWillMount to async()

 componentWillMount= async()=>{

---

我已使用dbConfig.js文件导入firebase凭据。我很容易获取数据，但无法根据我的要求将关键字/条形码推送到firebase。例如，10001是洗衣机的条形码，当我手动搜索（分配数据=10001）它时，我得到“洗衣机”作为输出。但在我的搜索中不起作用。您是否尝试删除de“14”之前的第一个斜杠：Like=>

var ref=firebase.database（）.ref（'14/info'）手动分配时的工作状态[data=10001]；其输出为“洗衣机”。但不能像搜索一样工作我试着删除“14”之前的斜杠，但仍然不起作用