Javascript 获取JSON解析错误：意外标识符“0”；“未定义”；使用React native&；反应导航？

我是一个新来的本地人，所以如果这个问题看起来很愚蠢，我很抱歉，在问这个问题之前，我已经试了好几个小时来让它起作用

我正在尝试使用firebase数据库将数据从文本输入传递到下一个屏幕

我一直收到错误JSON解析错误：意外标识符“未定义”，我在下面附加了两个文件，一个是文本输入（InputForm.js），另一个是我想在屏幕上显示数据的文件（ASTConfig1screen）

如果有人能帮上忙，你真的是个超级明星

InputForm.js

import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, View, TextInput } from 'react-native';

import { Button } from 'react-native-elements';

import firebase from '../Firebase';

import { withNavigation } from 'react-navigation';



class InputForm extends Component {

constructor() {
  super();
  this.ref = firebase.firestore().collection('boards');
  this.state = {
    name: '',
    inventoryclass: '',
    outlet: '',
    isLoading: false,
  };
}
updateTextInput = (text, field) => {
  const state = this.state
  state[field] = text;
  this.setState(state);
}



saveBoard() {
  this.setState({
    isLoading: true,
  });
  this.ref.add({
    name: this.state.name,
    inventoryclass: this.state.inventoryclass,
    outlet: this.state.outlet,
  }).then((docRef) => {
    this.setState({
      name: '',
      outlet: '',
      inventoryclass: '',
      isLoading: false,
    });
    this.props.navigation.navigate('ASTConfig1');
  })
  .catch((error) => {
    console.error("Error adding document: ", error);
    this.setState({
      isLoading: false,
    });
  });
}
render() {
  if(this.state.isLoading){
    return(
      <View style={styles.activity}>
        <ActivityIndicator size="large" color="#ffa500"/>
      </View>
    )
  }
  return (
    <ScrollView style={styles.container}>
      <View style={styles.subContainer}>
        <TextInput style={styles.inputtext}
            placeholder={'Name'}
            placeholderTextColor="white"
            value={this.state.name}
            onChangeText={(text) => this.updateTextInput(text, 'name')}
        />
      </View>
      <View style={styles.subContainer}>
        <TextInput style={styles.inputtext}
            multiline={true}
            numberOfLines={4}
            placeholder={'Inventory Class'}
            placeholderTextColor="white"
            value={this.state.inventoryclass}
            onChangeText={(text) => this.updateTextInput(text, 'inventoryclass')}
        />
      </View>
      <View style={styles.subContainer}>
        <TextInput style={styles.inputtext}
            placeholder={'Outlet'}
            placeholderTextColor="white"
            value={this.state.outlet}
            onChangeText={(text) => this.updateTextInput(text, 'outlet')}

        />
      </View>
      <View style={styles.button}>
        <Button
          large
          leftIcon={{name: 'save'}}
          title='Save'
          onPress={() => this.saveBoard()} />
      </View>
    </ScrollView>
  );
}
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    marginBottom: 20,
    padding: 5,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  inputtext: {
    color: 'white',
    fontSize: 20
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default withNavigation(InputForm);

InputForm.js
从“React”导入React，{Component}；
从“react native”导入{StyleSheet，ScrollView，ActivityIndicator，View，TextInput}；
从“react native elements”导入{Button}；
从“../firebase”导入firebase；
从“react navigation”导入{withNavigation}；
类InputForm扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）.collection（'boards'）；
此.state={
名称：“”，
inventoryclass:“”，
出口：''，
孤岛加载：false，
};
}
updateTextInput=（文本，字段）=>{
const state=this.state
状态[字段]=文本；
本.设置状态（状态）；
}
存储板（）{
这是我的国家({
孤岛加载：是的，
});
此为参考添加({
名称：this.state.name，
inventoryclass:this.state.inventoryclass，
出口：this.state.outlet，
})。然后（（docRef）=>{
这是我的国家({
名称：“”，
出口：''，
inventoryclass:“”，
孤岛加载：false，
});
this.props.navigation.navigate（'ASTConfig1'）；
})
.catch（（错误）=>{
console.error（“添加文档时出错：”，错误）；
这是我的国家({
孤岛加载：false，
});
});
}
render（）{
if（此.state.isLoading）{
返回(
)
}
返回(
this.updateTextInput（文本，'name'）}
/>
this.updateTextInput（文本“inventoryclass”）}
/>
this.updateTextInput（文本“outlet”）}
/>
this.saveBoard（）}/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：20
},
分包商：{
弹性：1，
marginBottom:20，
填充：5，
边界宽度：2，
边框底部颜色：“#中交”，
},
输入文本：{
颜色：'白色'，
尺寸：20
},
活动：{
位置：'绝对'，
左:0,，
右:0,，
排名：0，
底部：0，
对齐项目：“居中”，
为内容辩护：“中心”
}
})
使用导航导出默认值（InputForm）；

这就是我想在这个屏幕上显示数据的地方

ASTConfig1.js

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  ImageBackground,
  StatusBar,
  SafeAreaView,
  TextInput,
  ScrollView,
  UIManager,
  ActivityIndicator
  }
  from 'react-native';

import {AccordionList} from "accordion-collapse-react-native";
import { Separator } from 'native-base';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import firebase from '../Firebase';

import Logo from '.././components/Logo';
import Colors from '.././constants/Colors';
import Search from '.././components/Search';
import InputForm from '.././components/InputForm';


class ASTConfig1Screen extends React.Component {
  static navigationOptions = {
    title: 'ASTConfig1',
  };

  constructor(props) {
    super(props);

      this.state= {
        isLoading: true,
        board: {},
        key: '',
        status:true,
        text: '',
        list:[
      {
        title: 'Getting Started',
        body: 'React native Accordion/Collapse component, very good to use in toggles & show/hide content'
      },
      {
        title: 'Components',
        body: 'AccordionList,Collapse,CollapseHeader & CollapseBody'
      },
      {
        title: 'Test',
        body: 'AccordionList,Collapse,CollapseHeader & CollapseBody'
      }
      ],
      }
    }

    componentDidMount() {
      const { navigation } = this.props;
      const ref = firebase.firestore().collection('boards').doc(JSON.parse(navigation.getParam('boardkey')));
      ref.get().then((doc) => {
        if (doc.exists) {
          this.setState({
            board: doc.data(),
            key: doc.id,
            isLoading: false
          });
        } else {
          console.log("No such document!");
        }
      });
    }



    _head(item){
  return(
      <Separator bordered style={{alignItems:'center'}}>
        <Text>{item.title}</Text>
      </Separator>
  );
}


    _body(item){
        return (
            <View style={{padding:10}}>
              <Text style={{textAlign:'center'}}>{item.body}</Text>
            </View>
        );
    }




    ShowHideTextComponentView = () =>{

  if(this.state.status == true)
  {
    this.setState({status: false})
  }
  else
  {
    this.setState({status: true})
  }
}



  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.activity}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      )
    }

   return (

  <View style={styles.screen}>

          <ImageBackground
              source={require('.././assets/Img/BackGround2.png')}
              style={styles.background}>
          </ImageBackground>

  <SafeAreaView>

      <View style={{flex: 1, justifyContent: 'space-between', width: wp('80%')}}>

        <View style={styles.logotop}>
            <Logo/>
        </View>
        <View style={styles.editstock}>
          <Text style={styles.editstocktext}>EDIT STOCK LIST:</Text>
        </View>

{/*Start of 3 buttons Firebase*/}

     <View style={styles.three}>
        <View style={styles.edit1}>
          <Text style={styles.textheader}>{this.state.board.name}</Text>
        <Button style={styles.edit} title='Edit' ></Button>
     </View>

        <View style={{padding: 3}}></View>


        <View style={styles.edit2}>
          <Text style={styles.text}>{this.state.board.inventoryclass}</Text>
        <Button style={styles.edit} title='Edit' ></Button>
        </View>

        <View style={styles.edit3}>
          <Text style={styles.text}>{this.state.board.outlet}</Text>
        <Button style={styles.edit} title='Edit' ></Button>
        </View>
   </View>



{/*End of 3 buttons Firebase*/}



{/*Start of AccordionList*/}

        <ScrollView>
          <View style={styles.middle}>
          <AccordionList
                      list={this.state.list}
                      header={this._head}
                      body={this._body}
                    />
          </View>
        </ScrollView>

{/*End of AccordionList*/}


{/*Start of Search*/}

        <View>

      {

        this.state.status ? null : <View style={styles.bottom}>
          <Text style={styles.textbottom}>SEARCH FOR NEW ITEMS:</Text>
          <Search />
        </View>
      }

      <Button title="ADD" onPress={this.ShowHideTextComponentView} />

      </View>


     </View>
    </SafeAreaView>
  </View>
  );
 };
};

{/*End of Search*/}

export default ASTConfig1Screen;

ASTConfig1.js
从“React”导入React；
进口{
看法
文本，
样式表，
按钮
图像背景，
状态栏，
安全区域视图，
文本输入，
滚动视图，
行政经理，
活动指示器
}
从“反应本机”；
从“accordion本地”导入{AccordionList}；
从“本机基”导入{Separator}；
从“react native responsive screen”导入{widthPercentageToDP作为wp，heightPercentageToDP作为hp}；
从“../firebase”导入firebase；
从“..//组件/徽标”导入徽标；
从“..//常量/颜色”导入颜色；
从“..//组件/搜索”导入搜索；
从“.././components/InputForm”导入InputForm；
类ASTConfig1Screen扩展了React.Component{
静态导航选项={
标题：“ASTConfig1”，
};
建造师（道具）{
超级（道具）；
此。状态={
孤岛加载：是的，
董事会：{}，
键：“”，
状态：正确，
文本：“”，
名单：[
{
标题：“入门”，
正文：“React原生手风琴/折叠组件，非常适合用于切换和显示/隐藏内容”
},
{
标题：“组件”，
正文：“手风琴列表，折叠，折叠头和折叠盒”
},
{
标题:"测试",，
正文：“手风琴列表，折叠，折叠头和折叠盒”
}
],
}
}
componentDidMount（）{
const{navigation}=this.props；
const ref=firebase.firestore（）.collection（'boards'）.doc（JSON.parse（navigation.getParam（'boardkey'））；
参考get（）。然后（（文档）=>{
如果（文件存在）{
这是我的国家({
board:doc.data（），
关键字：doc.id，
孤岛加载：false
});
}否则{
log（“没有这样的文档！”）；
}
});
}
_总目（项目）{
返回(
{item.title}
);
}
_正文（项目）{
返回(
{item.body}
);
}
ShowHideTextComponentView=（）=>{
if（this.state.status==true）
{
this.setState（{status:false}）
}
其他的
{
this.setState（{status:true}）
}
}
render（）{
if（此.state.isLoading）{
返回(
)
}
返回(
编辑库存清单：
{/*开始3个按钮Firebase*/}
{this.state.board.name}
{this.state.board.inventoryclass}
{this.state.board.outlet}
{/*3个按钮的结尾Firebase*/}
{/*手风琴列表的开始*/}
{/*手风琴列表结尾*/}
{/*开始搜索*/}
{
this.state.status？空：
搜索新项目：
}
);
};
};
{/*搜索结束*/}
导出默认ASTConfig1屏幕；

---

但它返回错误-添加文档时出错：[SyntaxError:SyntaxError:SyntaxError:JSON解析错误：在inputform.js存储板函数中，您应该

this.props.navigation.navigate('Details', {
              'ASTConfig1': docRef
            });

---

并从其他文件中删除JSON.parse

您没有通过的

boardkey