获取 JSON Parse 错误：使用 React Native 和 React 导航时出现意外标识符“未定义”？

Question

I am pretty new to React Native, so if the question seems stupid i am sorry in advance, i have been trying for hours to get this to work before asking this question.

I am trying to pass data from a text input to the next screen using firebase database.

I keep getting the error JSON Parse error: Unexpected identifier "undefined", I have attached below my two files, one with the text input (InputForm.js) and the other one which i want to show that data on the screen (ASTConfig1screen)

If anyone can help with this you really are a superstar!

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

and this is where i would like to show the data on this screen

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;

but it returns the error - Error adding document: [SyntaxError: SyntaxError: SyntaxError: JSON Parse error: Unexpected identifier "undefined"

Answer 1

in inputform.js saveBoard function you should

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

and remove JSON.parse form other file