React-Native Logs undefined ist kein Objekt (Bewertung '_this.props.passProps.exmpale')

Question

Bitte helfen Sie mir. Ich bewege mich zwischen den Bildschirmen von categoryId der gleichen Kategorie, aber es funktioniert nicht Ich habe meinen Code angehängt.

Sickness.php

mysql_connect('localhost','root',''); 
    mysql_select_db('sucKhoe'); 
    mysql_query('SET NAMES utf8'); 


    $data = json_decode(file_get_contents('php://input'), true); 

    $arrSickness = array(); 
    $categoryId= $data["categoryId"]; 
    class sickness{ 
    var $sickName; 

    function sickness($_name){ 
     $this->sickName = $_name; 

    } 
    } 

    $sql = "SELECT * FROM Sickness WHERE CategoryId = " .$categoryId ; 
    $query = mysql_query($sql); 

    while($row = mysql_fetch_array($query)){ 
    array_push($arrSickness, new sickness($row["SickName"])); 
    } 

    echo json_encode($arrSickness); 

Category.js

import React, {Component} from 'react'; 
    import { 
     Text, 
     View, StyleSheet, ListView, StatusBar, TouchableOpacity 
    } from 'react-native'; 

var deviceScreen = require('Dimensions').get('window') 

var URL_API = 'http://localhost/Cancer_API/Category.php' 
var URL = 'http://localhost/Cancer_API/Sickness.php' 

class Category extends Component{ 


    constructor(props){ 
    super(props); 
    this.state = { 
     dataSource: new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}) 
    }; 
    this.pushView = this.pushView.bind(this); 
    } 

    fetchData(){ 
    fetch(URL_API, {method: "POST", body: null}) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(responseData) 
     }) 
     }) 
     .done() 
    } 

    componentDidMount(){ 
    this.fetchData(); 
    } 

    taoHang(property){ 
     return(
     <TouchableOpacity style={styles.hang} 
      onPress={()=> this.pushView(property.categoryId, property.categoryName)}> 
      <View style={styles.viewName}> 
      <Text style={styles.name}>{property.categoryName}</Text> 
      </View> 
     </TouchableOpacity> 
    ); 
    } 

    pushView(id, name){ 
    fetch(URL, {method: "POST", body: JSON.stringify({categoryId: id})}) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.props.navigator.push({ 
      name:'Sickness', 
      component: require('./Sickness'), 
      props: {title: name, sickness: responseData} 
     }); 
     }) 
     .done() 
    } 

    render(){ 
    return(
     <View style={styles.container}> 
     <View style={styles.header}> 
      <TouchableOpacity style={styles.backButton} 
      onPress={()=> this.props.navigator.pop()} > 
      <Text style={styles.backHeader}>Back</Text> 
      </TouchableOpacity> 
      <View style={styles.baoTitle}> 
      <Text style={styles.titleHeader}>Tin Tuc</Text> 
      </View> 
     </View> 
     <View style={styles.danhsach}> 
      <ListView dataSource={this.state.dataSource} 
      renderRow={this.taoHang.bind(this)} /> 
     </View> 
     </View> 

    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container:{ 
    flex: 1, 
    }, 
    header:{ 
    flexDirection:'row', 
    flex: 1, 
    backgroundColor:'#09C' 
    }, 
    backButton:{ 
    flex: 1, 
    justifyContent:'center', 
    alignItems:'center', 
    backgroundColor:'#09C' 
    }, 
    baoTitle:{ 
    flex: 6, 
    justifyContent:'center', 
    alignItems:'center', 
    marginRight: deviceScreen.width/7 , 
    backgroundColor:'#09C' 
    }, 
    titleHeader:{ 
    color:'white', 
    fontSize:20, 
    fontWeight:'400' 
    }, 
    backHeader:{ 
    color:'white', 
    fontSize:16, 
    fontWeight:'400' 
    }, 
    danhsach:{ 
    flex: 10, 
    backgroundColor: '#F7F7F7' 
    }, 
    hang:{ 
    flexDirection: 'row', 
    flex: 1, 
    padding: 10, 
    borderBottomWidth: 1, 
    borderColor: '#09C' 
    }, 
    viewName:{ 
    flex: 1, 
    justifyContent:'center', 
    alignItems:'center', 
    }, 
    name:{ 
    fontSize: 18, 
    fontWeight: '300' 
    } 
}) 

module.exports = Category; 

Sickness.js

import React, {Component} from 'react'; 
import { 
    Text, 
    View, StyleSheet, ListView, StatusBar, TouchableOpacity 
} from 'react-native'; 

var deviceScreen = require('Dimensions').get('window') 
var URL = 'http://localhost/Cancer_API/Sickness.php' 

class Sickness extends Component{ 


    constructor(props){ 
    super(props); 
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}) 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.passProps.sickness) 
    }; 
    this.pushView = this.pushView.bind(this); 
    } 

    taoHang(property){ 
    return(
     <TouchableOpacity style={styles.hang} 
     onPress={()=> this.pushView()}> 
     <View style={styles.viewName}> 
      <Text style={styles.name}>{property.sickName}</Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 

    pushView(id, name){ 
    fetch(URL, {method: "POST", body: JSON.stringify({categoryId: id})}) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.props.navigator.push({ 
      name:'Sickness', 
      component: require('./Sickness'), 
      props: {title: name, sickness: responseData} 
     }); 
     }) 
     .done() 
    } 

    render(){ 
    return(
     <View style={styles.container}> 
     <View style={styles.header}> 
      <TouchableOpacity style={styles.backButton} 
      onPress={()=> this.props.navigator.pop()} > 
      <Text style={styles.backHeader}>Back</Text> 
      </TouchableOpacity> 
      <View style={styles.baoTitle}> 
      <Text style={styles.titleHeader}>Tin Tuc</Text> 
      </View> 
     </View> 
     <View style={styles.danhsach}> 
      <ListView dataSource={this.state.dataSource} 
      renderRow={this.taoHang.bind(this)} /> 
     </View> 
     </View> 

    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container:{ 
    flex: 1, 
    }, 
    header:{ 
    flexDirection:'row', 
    flex: 1, 
    backgroundColor:'#09C' 
    }, 
    backButton:{ 
    flex: 1, 
    justifyContent:'center', 
    alignItems:'center', 
    backgroundColor:'#09C' 
    }, 
    baoTitle:{ 
    flex: 6, 
    justifyContent:'center', 
    alignItems:'center', 
    marginRight: deviceScreen.width/7 , 
    backgroundColor:'#09C' 
    }, 
    titleHeader:{ 
    color:'white', 
    fontSize:20, 
    fontWeight:'400' 
    }, 
    backHeader:{ 
    color:'white', 
    fontSize:16, 
    fontWeight:'400' 
    }, 
    danhsach:{ 
    flex: 10, 
    backgroundColor: '#F7F7F7' 
    }, 
    hang:{ 
    flexDirection: 'row', 
    flex: 1, 
    padding: 10, 
    borderBottomWidth: 1, 
    borderColor: '#09C' 
    }, 
    viewName:{ 
    flex: 1, 
    justifyContent:'center', 
    alignItems:'center', 
    }, 
    name:{ 
    fontSize: 18, 
    fontWeight: '300' 
    } 
}) 

module.exports = Sickness; 

IOS Simulator Logs undefiniert ist kein objec t

Answer 1

In Category.js ändern Requisiten passProps ('_this.props.passProps.sickness' Auswertung):

this.props.navigator.push({ 
    name:'Sickness', 
    component: require('./Sickness'), 
    passProps: {title: name, sickness: responseData} 
}); 

In Sickness.js erhalten Sie die passProps einfach als Requisiten:

this.state = { 
    dataSource: ds.cloneWithRows(this.props.sickness) 
};