正在获取JSON解析错误：使用React native和React导航时出现意外的标识符“ undefined”？

Question

我对React Native来说还很陌生，所以如果这个问题看起来很愚蠢，请事先对不起，我一直在努力几个小时才能解决这个问题。

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

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

如果有人可以帮助您，那么您确实是超级巨星！

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

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

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;

但返回错误-添加文档时出错：[SyntaxError：SyntaxError：SyntaxError：JSON解析错误：意外的标识符“ undefined”

Answer 1

您应该在inputform.js saveBoard函数中

 function multiplication_table(a, b) {
    var table = "<table style='width:500px'>";
    var product, n_1, n_2;

    for (n_2 = a - 1; n_2 <= b; n_2++) {
     table += "<th>" + n_2 + "</th>";
    }

    for (n_1 = a; n_1 <= b; n_1++) {
      table += "<tr>";

      table += "<th>" + n_1 + "</th>";
      for (n_2 = a; n_2 <= b; n_2++) {
        product = n_1 * n_2;
        table += "<td>" + product + "</td>";
      }
      table += "</tr>";
    }
    table += "</table>";

    document.getElementById("table").innerHTML = table;
  }

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