React-Native：无法从ListView发送道具

Question

I made a listView using redux and axios request and everything seems fine....but i can't get the object in my render method...

Here is my code

   import React from 'react';
import { View, ListView, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { ItemOverView } from '../../components/common';
import * as actions from '../../actions';

class AwaitingScreen extends React.Component {
  static navigationOptions = {
  header: null,
  };

  state = { loading: true };

  componentWillMount() {
    this.props.getAwaitingOrders();
    this.createDataSource(this.props);
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ loading: false });
    this.createDataSource(nextProps);
  }
  createDataSource(orders) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.dataSource = ds.cloneWithRows(orders);
  }

  renderListView() {
    if (this.state.loading) {
      return (<ActivityIndicator
        size='large'
        color='#397af8'
      />
    );
    }
    return (
      <ListView
        enableEmptySections
        dataSource={this.dataSource}
        renderRow={this.renderRow}
      />
    );
  }
  renderRow = (order) => {
    return (
      <ItemOverView
        item={order}
      />
    );
  }
  render() {
    return (
      <View>
        {this.renderListView()}
      </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    awaitingOrders: state.orders.awaitingOrders,
    statusCodes: state.orders.statusCodes
  };
};
export default connect(mapStateToProps, actions)(AwaitingScreen);

ITEMVIEW:

    import React from 'react';
import { View, Text } from 'react-native';

 class ItemOverView extends React.Component {
  render() {
    console.log(this.props.item);

    return (
      <View style={style.containerStyle}>
        <Text>{this.props.item.id}</Text>
      </View>
    );
  }
}
const style = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  }
};
export { ItemOverView };

As i run this code,I get an error undefined is not an object (evaluating 'this.props.item.id') ...The json i receive has 6 items in it and I get it correctly(checked from console.log).If i pass something static to ItemView...say item = 'product' then it gets rendered 6 times...so everything seems to works well, But for some reason it won't get the object

Answer 1

It seems you don't use propTypes. In RN if you import your component from outside and send your data in to it, you can use propTypes.

You can install with npm.

npm install --save prop-types

And after, here try this ITEMVIEW, it should work. If not, this means problem is in your data. So, check your data before calling your component.

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text } from 'react-native';

 class ItemOverView extends React.Component {

  constructor(props) {
      super(props);
  }

  render() {
    console.log(this.props.item);

    return (
      <View style={style.containerStyle}>
        <Text>{this.props.item.id}</Text>
      </View>
    );
  }
}
const style = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  }
};
ItemOverView.propTypes = {
  item: PropTypes.object,
};
ItemOverView.defaultProps = {
  item: null,
};
export { ItemOverView };