獲取 JSON Parse 錯誤：使用 React Native 和 React 導航時出現意外標識符“未定義”？

Question

我對 React Native 還很陌生，所以如果這個問題看起來很愚蠢，我很抱歉，在問這個問題之前，我已經嘗試了幾個小時來讓它工作。

我正在嘗試使用 firebase 數據庫將數據從文本輸入傳遞到下一個屏幕。

我不斷收到錯誤 JSON Parse error: Unexpected identifier "undefined"，我在我的兩個文件下面附加了一個，一個是文本輸入 (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);

這是我想在這個屏幕上顯示數據的地方

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 Parse error: Unexpected identifier "undefined"

Answer 1

在 inputform.js saveBoard 函數中，你應該

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

並從其他文件中刪除 JSON.parse