前端之家

  1. 首页
  2. 问答

* TypeError：未定义不是对象（正在评估'this.props.products.pr_name'）*反应本机Firestore

• 问答

请有人帮我吗？我正在使用React Native和Firestore作为数据库来开发移动应用程序。请帮助我找出我的代码有什么问题。当我单击可触摸的不透明度时，出现此错误“ TypeError：未定义不是对象（正在评估'this.props.products.pr_name'）”。它可以使用tabNav完美地工作，但是当我换到抽屉中时遇到了这个问题。这是我的代码。请帮助我

secondSideMenu.js 

// React native and others libraries imports
import React,{ Component } from 'react';
import { BackHandler,StyleSheet } from 'react-native';
import { Root } from 'native-base';
import { Router,Stack,Scene,Drawer } from 'react-native-router-flux';
import Home from './Home';
import SideMenu from './Sidemenu';
import Addproduct from './Addproduct';
import acceptedOrder from './accepted';
import Incoming from './Incoming';
import Completed from './Completed';
import ListProduct from './Listproduct';
import OrderDetails from './OrderDetails';
import GrayScreen from './GrayScreen';
import SettingScreen from './SettingScreen';
import Addimage from './Addimage';


export default class secondSideMenu extends Component {

  render() {
    return (
      <Router>
        <Stack key="root">



          <Drawer
            hideNavBar
            initial
            key="drawerMenu"
            contentComponent={SideMenu}
            drawerWidth={250}
            drawerPosition="left"
            ref={(ref) => this._drawer = ref}
            headerLayoutPreset={'center'}
            type="overlay"
            swipeEnabled
            openDrawerOffset={0.3}
            tapToClose={true}
        onCloseStart={() => Keyboard.dismiss()}
        openDrawerOffset={0.3}
            tintColor="#000"
            navigationBarStyle={styles.navBar}
            titleStyle={styles.navBarTitle}>
            <Scene key="home" title="Orders" component={Home} />
            <Scene key="incoming" title="Orders" component={Incoming} />
            <Scene key="accepted" title="accepted Order" component={acceptedOrder} />
            <Scene key="completed" title="Completed Order" component={Completed} />
            <Scene key="orderdetails" component={OrderDetails} hideNavBar/>
            <Scene key="addproduct" title="Add Product" component={Addproduct} />
            <Scene key="listproduct" title="List of Product" component={ListProduct} />
            <Scene key="gray" title="Edit Product" component={GrayScreen} />
            <Scene key="setting" title="Store Setting" component={SettingScreen} />
            <Scene key="addimage" title="add image" component={Addimage} />


          </Drawer>
        </Stack>
      </Router>
    );
  }

  close() {
    this._drawer.close();
  }

  open() {
    this._drawer.open();
  }
}
const styles = StyleSheet.create({
  navBar: {
    backgroundColor: "#ffc75c",},navBarTitle: {
    color: "#FFFFFF",alignSelf: "center"
  },});

Sidemenu.js 

import React,{ Component } from 'react';
import { Text,View,StyleSheet,Button,flatList,UIManager,Image,ScrollView } from 'react-native';
import {  ListItem,Body,Left,Right,Icon,Item,Grid,Col } from 'native-base';

import { actions } from 'react-native-router-flux';
export default class SideMenu extends Component {
  constructor(props) {
    super(props);
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  render() {
    return (
      <View style={styles.container}>
          <View style={styles.header}>

           <View style={styles.headerContent}>

               <Image style={styles.avatar}
               source={{uri:'https://img.icons8.com/color/1600/circled-user-male-skin-type-1-2.png'}}/>

             <View style={{ alignItems: 'center',justifyContent: 'center'}}>
                    <Text style={styles.name}>Name Of Store</Text>
                   <Text style={styles.userInfo}>Let's increase your sales today! Cater all the orders</Text>
            </View>
         </View>
          </View>
          <ScrollView>
        <ListItem
                icon
                key="home"
                button={true}
                onPress={() => actions.incoming()}
              >
                <Body>
                  <Text>Incoming Orders</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="accepted"
                button={true}
                onPress={() => actions.accepted()}
              >
                <Body>
                  <Text>accepted Orders</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="completed"
                button={true}
                onPress={() => actions.completed()}
              >
                <Body>
                  <Text>Completed Orders</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="addproduct"
                button={true}
                onPress={() => actions.addproduct()}
              >
                <Body>
                  <Text>Add Product</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="listproduct"
                button={true}
                onPress={() => actions.listproduct()}
              >
                <Body>
                  <Text>Product</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="storesetting"
                button={true}
                onPress={() => actions.setting()}
              >
                <Body>
                  <Text>Store Settings</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>



           <ListItem
                icon
                key="sales"
                button={true}
                onPress={() => actions.login()}
              >
                <Body>
                  <Text>Sales Today</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="image"
                button={true}
                onPress={() => actions.addimage()}
              >
                <Body>
                  <Text>Add product Image</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           <ListItem
                icon
                key="logout"
                button={true}
                onPress={() => actions.login()}
              >
                <Body>
                  <Text>Logout</Text>
                </Body>
                <Right>
                  <Icon name="ios-arrow-forward" />
                </Right>
           </ListItem>

           </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,flexDirection: 'column',justifyContent: 'flex-start',alignItems: 'stretch',backgroundColor: '#F5FCFF',paddingRight: 20,paddingLeft: 20,paddingBottom: 10,headerContent:{
    padding:30,alignItems: 'center',avatar: {
    width: 130,height: 130,borderRadius: 63,borderWidth: 4,borderColor: "white",marginBottom:10,name:{
    fontSize:22,color:"#003f5c",fontWeight:'600',userInfo:{
    fontSize:13,color:"#ff4d4d",});

Listproduct.js 

import React,{ Component } from 'react';
import {
    StyleSheet,Alert,TextInput,Text,Platform,TouchableOpacity,activityIndicator,SafeAreaView,Image
} from 'react-native';
import { actions } from 'react-native-router-flux'; 
import firebase from './firebase';



export default class ListProduct extends Component{


  constructor() {
    super();
    this.ref = firebase.firestore().collection('products');
    this.unsubscribe = null;
    this.state = {
      isLoading: true,dataSource: []
    };
  }
      componentDidmount() {

        this.unsubscribe = this.ref.onsnapshot(this.onCollectionUpdate);
      }


      onCollectionUpdate = (querysnapshot) => {
        const dataSource = [];
        querysnapshot.forEach((doc) => {
          const { pr_image,pr_name,pr_id,pr_price,pr_section,pr_store_name,store_id,prod_status,pr_unit,} = doc.data();
          dataSource.push({
            key: doc.id,doc,// Documentsnapshot
            pr_image,});
        });
        this.setState({
          dataSource,isLoading: false,});

      }


      render() {
        if (this.state.isLoading) {
          return (
            <View style={{flex: 1,paddingTop: 20}}>
              <activityIndicator size="large" color="#00ff00" style={{  flex: 1,justifyContent: "center",flexDirection: "row",justifyContent: "space-around",padding: 10}}/>
            </View>
          );
        }

        return (


<View style={styles.container}>

 <flatList

  data={ this.state.dataSource }


  renderItem={({item}) => 

      <TouchableOpacity style={styles.cardContainer}   onPress={() => actions.gray({products: item})}>

        <Image source = {{ uri: item.pr_image }} style={styles.imageView} />
        <Text style={{fontWeight: "bold",padding: 5,paddingLeft:10 }}>{item.pr_name}</Text>

        <Text  style={{ padding: 5}}>{item.pr_price}</Text>

      </TouchableOpacity>

    }
    keyExtractor={item => item.pr_id}

  />

</View>

        );
      }

  }
  const styles = StyleSheet.create({

    MainContainer :{
      flex:1,paddingTop: 30,backgroundColor: '#fff'

    },MainContainer_For_Show_StudentList_activity :{

      flex:1,paddingTop: (Platform.OS == 'ios') ? 20 : 0,marginLeft: 5,marginRight: 5

      },TextInputStyleclass: {

    textAlign: 'center',width: '90%',marginBottom: 7,height: 40,borderWidth: 1,borderColor: '#FF5722',borderRadius: 5,TouchableOpacityStyle: {

      paddingTop:10,paddingBottom:10,borderRadius:5,marginBottom:7,backgroundColor: '#00BCD4'

    },TextStyle:{
      color:'#fff',textAlign:'center',rowViewContainer: {
      fontSize: 20,paddingRight: 10,paddingTop: 10,container: {
        flex: 1,padding: 2,backgroundColor: '#E5E5E5',cardContainer: {
        // Play with these
        // https://facebook.github.io/react-native/docs/view-style-props
        // https://facebook.github.io/react-native/docs/shadow-props
        backgroundColor: 'white',margin: 5,borderRadius: 12,shadowColor: 'rgba(107,87,140,0.1)',shadowOpacity: 1,shadowRadius: 16,shadowOffset: {
          height: 10,width: 0,flexDirection: 'row',elevation: 8,// Ignore these
        width: '100%',height: 60,imageView: {
        margin:5,width: '30%',height: 50,textView: {

      width:'50%',padding:10,color: '#000'

  }

  });

GrayScreen.js 

import React,ListView,ScrollView,KeyboardAvoidingView
} from 'react-native';
import { actions } from 'react-native-router-flux'; // New code
import firebase from './firebase';





export default class GrayScreen extends Component{


  constructor(props) {

    super(props)

    this.state = {

      prod_name: '',pr_image: '',pr_price: '',pr_section: '',pr_id: '',store_id: '',pr_store_name: '',prod_status: '',pr_unit: '',}

  }


  componentDidmount(){

   // Received Student Details Sent From Previous activity and Set Into State.
   this.setState({ 
     pr_name: this.props.products.pr_name,pr_image: this.props.products.pr_image,pr_price: this.props.products.pr_price,pr_section: this.props.products.pr_section,pr_id: this.props.products.pr_id,store_id: this.props.products.store_id,pr_store_name: this.props.products.pr_store_name,prod_status: this.props.products.prod_status,pr_unit: this.props.products.pr_unit,})

  }

 UpdateRecord = () =>{

  const userId = firebase.auth().currentUser.uid;
  const updateRef = firebase.firestore().collection('products').doc(this.state.pr_id);
  updateRef.set({
    pr_name: this.state.pr_name,pr_image: this.state.pr_image,pr_price: this.state.pr_price,pr_section: this.state.pr_section,pr_id: this.state.pr_id,store_id: this.state.store_id,pr_store_name: this.state.pr_store_name,prod_status: this.state.prod_status,pr_unit: this.state.pr_unit,}).then((docRef) => {
    this.setState({
      pr_name: '',});
    actions.popto("black");
    Toast.show({
      text: 'Product successfully updated!',position: 'bottom',type: 'success',buttonText: 'Dismiss',duration: 3000
    });
  })

   }





   OnDelete = () =>{

    Alert.alert(
      'Alert','Are you sure you want to delete the product?',[

        {text: 'Cancel',onPress: () => console.log('Cancel pressed'),style: 'cancel'},{text: 'OK',onPress: () =>  this.DeleteStudentRecord()},],{ cancelable: false }
    )
}


 DeleteStudentRecord() {
  const deleterecord = firebase.firestore().collection('products').doc(this.state.pr_id).delete().then(( res) => {
   console.log('Product Successfully Deleted')
   actions.popto("black");
  })

   }

render(){
  return (
    <View style={styles.MainContainer}>

    <Text style={{fontSize: 20,textAlign: 'center',marginBottom: 7}}> Edit Product</Text>

    <TextInput

      placeholder="Product Name"

      value={this.state.pr_name}

      onChangeText={ TextInputvalue => this.setState({ pr_name : TextInputvalue }) }

      underlineColorAndroid='transparent'

      style={styles.TextInputStyleclass}
    />

   <TextInput

      placeholder="Price"

      value={this.state.pr_price}

      onChangeText={ TextInputvalue => this.setState({ pr_price : TextInputvalue }) }

      underlineColorAndroid='transparent'

      style={styles.TextInputStyleclass}
    />

   <TextInput

      placeholder="Section"
      editable={false}
      value={this.state.pr_section}

      onChangeText={ TextInputvalue => this.setState({ pr_section : TextInputvalue }) }

      underlineColorAndroid='transparent'

      style={styles.TextInputStyleclass}
    />
<TextInput

      placeholder="Unit"
      editable={false}
      value={this.state.pr_unit}

      onChangeText={ TextInputvalue => this.setState({ pr_unit : TextInputvalue }) }

      underlineColorAndroid='transparent'

      style={styles.TextInputStyleclass}
    />
    <TextInput

      placeholder="Image"

      value={this.state.pr_image}

      onChangeText={ TextInputvalue => this.setState({ pr_image : TextInputvalue }) }

      underlineColorAndroid='transparent'

      style={styles.TextInputStyleclass}
    />


    <TextInput

placeholder="Status"

value={this.state.prod_status}

onChangeText={ TextInputvalue => this.setState({ prod_status : TextInputvalue }) }

underlineColorAndroid='transparent'

style={styles.TextInputStyleclass}
/>
   <TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.UpdateRecord} >

      <Text style={styles.TextStyle}> UPDATE STUDENT RECORD </Text>

   </TouchableOpacity>

   <TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.OnDelete} >

      <Text style={styles.TextStyle}> DELETE CURRENT RECORD </Text>

   </TouchableOpacity>


</View>

);
}

}
const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',backgroundColor: '#ffdf00',welcome: {
    fontSize: 20,margin: 10,color: '#ffffff',MainContainer :{

      alignItems: 'center',flex:1,}


});
wangdaren1 回答：* TypeError：未定义不是对象（正在评估'this.props.products.pr_name'）*反应本机Firestore
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
error-handlinggoogle-cloud-firestorejavascriptreact-nativereact-native-router-flux
本文链接：https://www.f2er.com/2519994.html

大家都在问