Javascript 使用参数问题响应本机导航，导航使用StackNavigator_Javascript_React Native

Javascript 使用参数问题响应本机导航，导航使用StackNavigator

javascript react-native

Javascript 使用参数问题响应本机导航，导航使用StackNavigator,javascript,react-native,Javascript,React Native,我对Stack Navigator非常困惑，因为我免费使用了Argon主题并对其进行了自定义，问题是当我导航到任何其他屏幕时，我无法在该屏幕中获取参数。请帮助我，我的代码有什么问题，请检查我在Home.js中的handleNavigation方法以及在AddWord.js中的componendidupdate，我尝试了dangerouslyGetParent（）.dangerouslyGetState（）来获取我的getParamsAndSetState（）中的参数方法，但即使我没有从导航传递任

我对Stack Navigator非常困惑，因为我免费使用了Argon主题并对其进行了自定义，问题是当我导航到任何其他屏幕时，我无法在该屏幕中获取参数。请帮助我，我的代码有什么问题，请检查我在Home.js中的handleNavigation方法以及在AddWord.js中的componendidupdate，我尝试了dangerouslyGetParent（）.dangerouslyGetState（）来获取我的getParamsAndSetState（）中的参数方法，但即使我没有从导航传递任何对象，它也会保留以前的值。基本上，我是从家里传递id的，所以addword的行为就像添加/更新组件一样。文件在这里：

Home.js

import React from 'react'; import { StyleSheet, Dimensions, ScrollView, ActivityIndicator } from 'react-native'; import { Block, theme } from 'galio-framework'; import { Card } from '../components'; import CustomCard from '../components/CustomCard'; import { argonTheme, tabs } from "../constants/"; import { Icon, Input } from "../components/"; import words from '../constants/words'; import articles from '../constants/articles'; import { withNavigationFocus } from '@react-navigation/compat'; import firebase from '../connection/Firebase'; const { width } = Dimensions.get('screen'); class Home extends React.Component { state = { items: [], search_text: '', navigationParams: { id: '', disabled: false }, animating: true } getList = () => { firebase.firestore().collection('wordCollection').get().then(x => { this.state.items = []; x.docs.map(doc => { this.setState({ items: [...this.state.items, { key: doc.data().key, word: doc.data().word, english_meaning: doc.data().english_meaning, arabic_meaning: doc.data().arabic_meaning, part_of_speech: doc.data().part_of_speech, synonym: doc.data().synonym }] }); }); this.setState({ animating: false }); }); } componentDidMount = () => { this.setState({ animating: true }, () => { return this.getList(); }); } componentDidUpdate(prevProps) { if (this.props.isFocused && !prevProps.isFocused) { this.setState({ animating: true }, () => { return this.getList(); }); } } handleNavigation = (id, disabled) => { // i get the correct values here returned from my child component this.setState({ navigationParams: { id: id, disabled: disabled } }, () => { this.props.navigation.navigate('AddWord', this.state.navigationParams); }); } renderArticles = () => { let myCard = this.state.items.map(value => { return <CustomCard customNavigation={this.handleNavigation} myItems={value} /> }) return ( <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={styles.articles}> <Block style={{ paddingHorizontal: theme.SIZES.BASE }}> <Input onChangeText={(w) => { this.setState({ search_text: w }) }} right placeholder="Search" iconContent={ <Icon size={20} color={argonTheme.COLORS.ICON} name="search-zoom-in" family="ArgonExtra" onPress={() => { this.search() }} /> } /> </Block> <Block flex> {myCard} </Block> </ScrollView> ) } render() { const animating = this.state.animating; return ( <Block flex center style={styles.home}> {animating == false ? this.renderArticles() : <ActivityIndicator animating={animating} size="large" style={styles.activityIndicator} />} </Block> ); } } const styles = StyleSheet.create({ activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 }, home: { width: width, }, articles: { width: width - theme.SIZES.BASE * 2, paddingVertical: theme.SIZES.BASE, }, }); export default withNavigationFocus(Home);

import React from "react"; import { ScrollView, StyleSheet, Dimensions, TouchableOpacity, ActivityIndicator } from "react-native"; // Galio components import { Block, Text, Button as GaButton, theme } from "galio-framework"; // Argon themed components import { argonTheme, tabs } from "../constants/"; import { Button, Select, Icon, Input, Header, Switch } from "../components/"; import firebase from '../connection/Firebase'; // import {NavigationEvents} from 'react-navigation'; import { NavigationEvents } from 'react-navigation'; import { withNavigation, withNavigationFocus } from '@react-navigation/compat'; const { width } = Dimensions.get("screen"); class AddWord extends React.Component { state = { "switch-1": true, "switch-2": false, word: '', synonym: '', part_of_speech: '', english_meaning: '', arabic_meaning: '', params: { id: '', disabled: false }, animating: true }; constructor(props) { super(props); // this.dbRef = firebase.firestore().collection('wordCollection'); } componentDidUpdate(prevProps) { if (this.props.isFocused && !prevProps.isFocused) { const { navigation, route } = this.props; const itemId = route.params; //gets undefined console.log('showing item id', itemId); this.setState({ animating: true }, () => { this.getParamsAndSetState(); }); } } getParamsAndSetState = () => { const navigation = this.props.navigation; navigation.dangerouslyGetParent().dangerouslyGetState().routes.map(v => { if (v.params != null) { console.log("i am here to check if params are null or not", v.params); return this.getData(v.params.id).then(() => { this.setState({ animating: false }); }); } }) } getData = (id) => { let col = firebase.firestore().collection('wordCollection'); col = col.where('word', '==', id); return col.get().then(x => { if (x.docs.length > 0) { this.setState({ word: x.docs[0].data().word, english_meaning: x.docs[0].data().english_meaning, arabic_meaning: x.docs[0].data().arabic_meaning, part_of_speech: x.docs[0].data().part_of_speech, synonym: x.docs[0].data().synonym }); } else { this.setState({ word: '', english_meaning: '', arabic_meaning: '', part_of_speech: '', synonym: '' }); } }); } componentDidMount() { this.setState({ animating: true }, () => { this.getParamsAndSetState(); }); } toggleSwitch = switchId => this.setState({ [switchId]: !this.state[switchId] }); addWord = () => { firebase.firestore().collection('wordCollection').doc(this.state.word).set({ word: this.state.word, part_of_speech: this.state.part_of_speech, english_meaning: this.state.english_meaning, arabic_meaning: this.state.arabic_meaning, synonym: this.state.synonym }).then((data) => { //success callback console.log('data ', data) }).catch((error) => { //error callback console.log('error ', error) }) } componentWillUnmount() { //this doesn't get called if i click home screen again this.setState({ word: '', synonym: '', part_of_speech: '', english_meaning: '', arabic_meaning: '', params: { id: '', disabled: false } }); } renderInputs = () => { const disabled = this.state.params.disabled; return ( <Block flex style={styles.group}> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input editable={disabled} value={this.state.word} onChangeText={(w) => { this.setState({ word: w }) }} style={styles.inputStyle} placeholder="Word" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Select onSelect={(i, v) => { this.setState({ part_of_speech: v }) }} value={this.state.part_of_speech} style={styles.dropDown} defaultIndex={0} options={ ["Noun", "Pronoun", "Verb", "Adjective", "Adverb", "Preposition", "Conjunction", "Interjection"] } /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.english_meaning} onChangeText={(w) => { this.setState({ english_meaning: w }) }} value={this.state.english_meaning} style={styles.textArea} placeholder="English Meaning" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.arabic_meaning} onChangeText={(w) => { this.setState({ arabic_meaning: w }) }} value={this.state.arabic_meaning} style={styles.textAreaArabic} placeholder="Arabic Meaning" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.synonym} onChangeText={(w) => { this.setState({ synonym: w }) }} value={this.state.synonym} style={styles.inputStyle} placeholder="Synonym" iconContent={<Block />} /> </Block> <Block style={[{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }]}> <Button onPress={() => { this.addWord() }} color="success" style={styles.button}> {disabled ? "Add" : "Save"} </Button> </Block> </Block> ); }; render() { const animating = this.state.animating; return ( <Block flex style={styles.customContainer}> {animating == false ? <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 30 }}> {this.renderInputs()} </ScrollView> : <ActivityIndicator animating={animating} size="large" style={styles.activityIndicator} />} </Block> ); } } const styles = StyleSheet.create({ dropDown: { borderRadius: 10, width: '80%', backgroundColor: '#fff' }, customContainer: { width: '100%', }, textArea: { borderRadius: 10, width: '80%', height: 100 }, textAreaArabic: { borderRadius: 10, width: '80%', height: 100, textAlign: 'right', }, inputStyle: { borderRadius: 10, width: '80%' }, title: { paddingBottom: theme.SIZES.BASE, paddingHorizontal: theme.SIZES.BASE * 2, marginTop: 44, color: argonTheme.COLORS.HEADER }, group: { paddingTop: theme.SIZES.BASE * 2, width: '100%' }, shadow: { shadowColor: "black", shadowOffset: { width: 0, height: 2 }, shadowRadius: 4, shadowOpacity: 0.2, elevation: 2 }, button: { marginBottom: theme.SIZES.BASE, width: width - theme.SIZES.BASE * 2 }, optionsButton: { width: "auto", height: 34, paddingHorizontal: theme.SIZES.BASE, paddingVertical: 10 }, input: { borderBottomWidth: 1 }, inputDefault: { borderBottomColor: argonTheme.COLORS.PLACEHOLDER }, inputTheme: { borderBottomColor: argonTheme.COLORS.PRIMARY }, inputTheme: { borderBottomColor: argonTheme.COLORS.PRIMARY }, inputInfo: { borderBottomColor: argonTheme.COLORS.INFO }, inputSuccess: { borderBottomColor: argonTheme.COLORS.SUCCESS }, inputWarning: { borderBottomColor: argonTheme.COLORS.WARNING }, inputDanger: { borderBottomColor: argonTheme.COLORS.ERROR }, social: { width: theme.SIZES.BASE * 3.5, height: theme.SIZES.BASE * 3.5, borderRadius: theme.SIZES.BASE * 1.75, justifyContent: "center" }, activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 } }); export default withNavigationFocus(AddWord);

从“React”导入React；从“react native”导入{样式表、维度、ScrollView、ActivityIndicator}；从“galio框架”导入{Block，theme}；从“../components”导入{Card}；从“../components/CustomCard”导入CustomCard；从“./constants/”导入{argonTheme，tabs}；从“./components/”导入{图标，输入}；从“../constants/words”导入单词；从“../constants/articles”导入项目；从'@react-navigation/compat'导入{withNavigationFocus}；从“../connection/firebase”导入firebase； const{width}=Dimensions.get（'screen'）；类Home扩展了React.Component{ 状态={ 项目：[]，搜索文本：“”，导航参数：{ id:“”，禁用：false }, 动画：正确 } getList=（）=>{ firebase.firestore（）.collection（'wordCollection'）.get（）.then（x=>{ this.state.items=[]； x、 docs.map（doc=>{ 这是我的国家({ items:[…this.state.items{ key:doc.data（）.key， word:doc.data（）.word，英语意思：doc.data（）。英语意思，阿拉伯文含义：doc.data（）.阿拉伯文含义，词性部分：doc.data（）。词性部分，同义词：doc.data（）.同义词 }] }); }); this.setState（{animating:false}）； }); } componentDidMount=（）=>{ this.setState（{animating:true}，（）=>{ 返回这个.getList（）； }); } componentDidUpdate（prevProps）{ if（this.props.isFocused&！prevProps.isFocused）{ this.setState（{animating:true}，（）=>{ 返回这个.getList（）； }); } } 手持导航=（id，禁用）=>{ //我在这里得到了从我的子组件返回的正确值 this.setState（{navigationParams:{id:id，disabled:disabled}，（）=>{ this.props.navigation.navigate（'AddWord'，this.state.navigationParams）； }); } 渲染片段=（）=>{ 让myCard=this.state.items.map（值=>{ 返回 }) 返回( {this.setState（{search_text:w}}} 正确的占位符=“搜索” 图标内容={ {this.search（）} /> } /> {myCard} ) } render（）{ 常量动画=this.state.animating；返回( {animating==false？this.renderArticles（）：} ); } } const styles=StyleSheet.create({ 活动指示器：{ 弹性：1，为内容辩护：“中心”，对齐项目：“居中”，身高：80 }, 主页：{ 宽度：宽度， }, 文章：{ 宽度：宽度-theme.size.BASE*2， paddingVertical:theme.size.BASE， }, }); 使用NavigationFocus（主页）导出默认值；
AddWord.js

import React from 'react'; import { StyleSheet, Dimensions, ScrollView, ActivityIndicator } from 'react-native'; import { Block, theme } from 'galio-framework'; import { Card } from '../components'; import CustomCard from '../components/CustomCard'; import { argonTheme, tabs } from "../constants/"; import { Icon, Input } from "../components/"; import words from '../constants/words'; import articles from '../constants/articles'; import { withNavigationFocus } from '@react-navigation/compat'; import firebase from '../connection/Firebase'; const { width } = Dimensions.get('screen'); class Home extends React.Component { state = { items: [], search_text: '', navigationParams: { id: '', disabled: false }, animating: true } getList = () => { firebase.firestore().collection('wordCollection').get().then(x => { this.state.items = []; x.docs.map(doc => { this.setState({ items: [...this.state.items, { key: doc.data().key, word: doc.data().word, english_meaning: doc.data().english_meaning, arabic_meaning: doc.data().arabic_meaning, part_of_speech: doc.data().part_of_speech, synonym: doc.data().synonym }] }); }); this.setState({ animating: false }); }); } componentDidMount = () => { this.setState({ animating: true }, () => { return this.getList(); }); } componentDidUpdate(prevProps) { if (this.props.isFocused && !prevProps.isFocused) { this.setState({ animating: true }, () => { return this.getList(); }); } } handleNavigation = (id, disabled) => { // i get the correct values here returned from my child component this.setState({ navigationParams: { id: id, disabled: disabled } }, () => { this.props.navigation.navigate('AddWord', this.state.navigationParams); }); } renderArticles = () => { let myCard = this.state.items.map(value => { return <CustomCard customNavigation={this.handleNavigation} myItems={value} /> }) return ( <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={styles.articles}> <Block style={{ paddingHorizontal: theme.SIZES.BASE }}> <Input onChangeText={(w) => { this.setState({ search_text: w }) }} right placeholder="Search" iconContent={ <Icon size={20} color={argonTheme.COLORS.ICON} name="search-zoom-in" family="ArgonExtra" onPress={() => { this.search() }} /> } /> </Block> <Block flex> {myCard} </Block> </ScrollView> ) } render() { const animating = this.state.animating; return ( <Block flex center style={styles.home}> {animating == false ? this.renderArticles() : <ActivityIndicator animating={animating} size="large" style={styles.activityIndicator} />} </Block> ); } } const styles = StyleSheet.create({ activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 }, home: { width: width, }, articles: { width: width - theme.SIZES.BASE * 2, paddingVertical: theme.SIZES.BASE, }, }); export default withNavigationFocus(Home);

import React from "react"; import { ScrollView, StyleSheet, Dimensions, TouchableOpacity, ActivityIndicator } from "react-native"; // Galio components import { Block, Text, Button as GaButton, theme } from "galio-framework"; // Argon themed components import { argonTheme, tabs } from "../constants/"; import { Button, Select, Icon, Input, Header, Switch } from "../components/"; import firebase from '../connection/Firebase'; // import {NavigationEvents} from 'react-navigation'; import { NavigationEvents } from 'react-navigation'; import { withNavigation, withNavigationFocus } from '@react-navigation/compat'; const { width } = Dimensions.get("screen"); class AddWord extends React.Component { state = { "switch-1": true, "switch-2": false, word: '', synonym: '', part_of_speech: '', english_meaning: '', arabic_meaning: '', params: { id: '', disabled: false }, animating: true }; constructor(props) { super(props); // this.dbRef = firebase.firestore().collection('wordCollection'); } componentDidUpdate(prevProps) { if (this.props.isFocused && !prevProps.isFocused) { const { navigation, route } = this.props; const itemId = route.params; //gets undefined console.log('showing item id', itemId); this.setState({ animating: true }, () => { this.getParamsAndSetState(); }); } } getParamsAndSetState = () => { const navigation = this.props.navigation; navigation.dangerouslyGetParent().dangerouslyGetState().routes.map(v => { if (v.params != null) { console.log("i am here to check if params are null or not", v.params); return this.getData(v.params.id).then(() => { this.setState({ animating: false }); }); } }) } getData = (id) => { let col = firebase.firestore().collection('wordCollection'); col = col.where('word', '==', id); return col.get().then(x => { if (x.docs.length > 0) { this.setState({ word: x.docs[0].data().word, english_meaning: x.docs[0].data().english_meaning, arabic_meaning: x.docs[0].data().arabic_meaning, part_of_speech: x.docs[0].data().part_of_speech, synonym: x.docs[0].data().synonym }); } else { this.setState({ word: '', english_meaning: '', arabic_meaning: '', part_of_speech: '', synonym: '' }); } }); } componentDidMount() { this.setState({ animating: true }, () => { this.getParamsAndSetState(); }); } toggleSwitch = switchId => this.setState({ [switchId]: !this.state[switchId] }); addWord = () => { firebase.firestore().collection('wordCollection').doc(this.state.word).set({ word: this.state.word, part_of_speech: this.state.part_of_speech, english_meaning: this.state.english_meaning, arabic_meaning: this.state.arabic_meaning, synonym: this.state.synonym }).then((data) => { //success callback console.log('data ', data) }).catch((error) => { //error callback console.log('error ', error) }) } componentWillUnmount() { //this doesn't get called if i click home screen again this.setState({ word: '', synonym: '', part_of_speech: '', english_meaning: '', arabic_meaning: '', params: { id: '', disabled: false } }); } renderInputs = () => { const disabled = this.state.params.disabled; return ( <Block flex style={styles.group}> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input editable={disabled} value={this.state.word} onChangeText={(w) => { this.setState({ word: w }) }} style={styles.inputStyle} placeholder="Word" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Select onSelect={(i, v) => { this.setState({ part_of_speech: v }) }} value={this.state.part_of_speech} style={styles.dropDown} defaultIndex={0} options={ ["Noun", "Pronoun", "Verb", "Adjective", "Adverb", "Preposition", "Conjunction", "Interjection"] } /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.english_meaning} onChangeText={(w) => { this.setState({ english_meaning: w }) }} value={this.state.english_meaning} style={styles.textArea} placeholder="English Meaning" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.arabic_meaning} onChangeText={(w) => { this.setState({ arabic_meaning: w }) }} value={this.state.arabic_meaning} style={styles.textAreaArabic} placeholder="Arabic Meaning" iconContent={<Block />} /> </Block> <Block style={{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }}> <Input value={this.state.synonym} onChangeText={(w) => { this.setState({ synonym: w }) }} value={this.state.synonym} style={styles.inputStyle} placeholder="Synonym" iconContent={<Block />} /> </Block> <Block style={[{ paddingHorizontal: theme.SIZES.BASE, alignItems: 'center' }]}> <Button onPress={() => { this.addWord() }} color="success" style={styles.button}> {disabled ? "Add" : "Save"} </Button> </Block> </Block> ); }; render() { const animating = this.state.animating; return ( <Block flex style={styles.customContainer}> {animating == false ? <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 30 }}> {this.renderInputs()} </ScrollView> : <ActivityIndicator animating={animating} size="large" style={styles.activityIndicator} />} </Block> ); } } const styles = StyleSheet.create({ dropDown: { borderRadius: 10, width: '80%', backgroundColor: '#fff' }, customContainer: { width: '100%', }, textArea: { borderRadius: 10, width: '80%', height: 100 }, textAreaArabic: { borderRadius: 10, width: '80%', height: 100, textAlign: 'right', }, inputStyle: { borderRadius: 10, width: '80%' }, title: { paddingBottom: theme.SIZES.BASE, paddingHorizontal: theme.SIZES.BASE * 2, marginTop: 44, color: argonTheme.COLORS.HEADER }, group: { paddingTop: theme.SIZES.BASE * 2, width: '100%' }, shadow: { shadowColor: "black", shadowOffset: { width: 0, height: 2 }, shadowRadius: 4, shadowOpacity: 0.2, elevation: 2 }, button: { marginBottom: theme.SIZES.BASE, width: width - theme.SIZES.BASE * 2 }, optionsButton: { width: "auto", height: 34, paddingHorizontal: theme.SIZES.BASE, paddingVertical: 10 }, input: { borderBottomWidth: 1 }, inputDefault: { borderBottomColor: argonTheme.COLORS.PLACEHOLDER }, inputTheme: { borderBottomColor: argonTheme.COLORS.PRIMARY }, inputTheme: { borderBottomColor: argonTheme.COLORS.PRIMARY }, inputInfo: { borderBottomColor: argonTheme.COLORS.INFO }, inputSuccess: { borderBottomColor: argonTheme.COLORS.SUCCESS }, inputWarning: { borderBottomColor: argonTheme.COLORS.WARNING }, inputDanger: { borderBottomColor: argonTheme.COLORS.ERROR }, social: { width: theme.SIZES.BASE * 3.5, height: theme.SIZES.BASE * 3.5, borderRadius: theme.SIZES.BASE * 1.75, justifyContent: "center" }, activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 } }); export default withNavigationFocus(AddWord);

从“React”导入React；从“react native”导入{ScrollView、样式表、维度、TouchableOpacity、ActivityIndicator}； //加利奥组件从“galio框架”导入{Block，Text，Button as GaButton，theme}； //氩主题组件从“./constants/”导入{argonTheme，tabs}；从“./components/”导入{按钮、选择、图标、输入、标题、开关}；从“../connection/firebase”导入firebase； //从“react navigation”导入{NavigationEvents}；从“react navigation”导入{NavigationEvents}；从'@react-navigation/compat'导入{withNavigation，withNavigationFocus}； const{width}=Dimensions.get（“屏幕”）；类AddWord扩展了React.Component{ 状态={ “开关-1”：正确， “开关-2”：错误，字：''，同义词：“”，演讲的第部分：''，英语的意思是：''，阿拉伯语的意思是：''，参数：{ id:“”，禁用：false }, 动画：正确 }; 建造师（道具）{ 超级（道具）； //this.dbRef=firebase.firestore（）.collection（'wordCollection'）； } componentDidUpdate（prevProps）{ if（this.props.isFocused&！prevProps.isFocused）{ const{navigation，route}=this.props； const itemId=route.params； //未定义 console.log（'显示项目id'，项目id）； this.setState（{animating:true}，（）=>{ 这个.getParamsAndSetState（）； }); } } getParamsAndSetState=（）=>{ 常量导航=this.props.navigation； navigation.dangerouslyGetParent（）.dangerouslyGetState（）.routes.map（v=>{ 如果（v.params！=null）{ log（“我在这里检查参数是否为null”，v.params）；返回此.getData（v.params.id）。然后（（）=>{ this.setState（{animating:false}）； }); } }) } getData=（id）=>{ 让col=firebase.firestore（）.collection（'wordCollection'）； col=col.where（'word'，'='，id）；返回col.get（）.then（x=>{ 如果（x.docs.length>0）{ 这是我的国家({ word:x.docs[0]。数据（）。word，英语\u含义：x.docs[0].data（）.english\m