Question

请帮帮我。我在categoryId相同类别的屏幕之间移动，但它不起作用我附加了我的代码。

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模拟器日志未定义不是对象（评估'_this.props.passProps.sickness'）

Answer 1

在Category.js中，将道具改为passProps：

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

在Sickness.js中，你只需将passProps作为道具：

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

React-Native Logs undefined不是一个对象（评估'_this.props.passProps.exmpale'）

1 个答案: