React-Native with Redux:API对象出现在我的console.log中,但不出现在我的视图中

时间:2016-06-25 05:41:28

标签: ios facebook react-native redux react-redux

我正在使用reactreact-nativereact-native-router-fluxreact-reduxredux构建一个简单的体育应用程序并试图拉{{1}顶级新闻对象到我的api。我需要的对象会显示在view上,但无法显示在console log上。

我得到的错误是:

  

无法读取未定义

的属性'cloneWithRowsAndSections'      

TypeError:无法读取属性'cloneWithRowsAndSections'   未定义       在NewsList.componentWillMount

我有什么遗失的东西吗?

新闻列表:

view

News_View:

export default class NewsList extends Component {
  constructor(props){
    super(props);
      const ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 != row2,
        sectionHeaderHasChanged: (s1, s2) => s1 !== s2
       });
      this.state = {
        dataSource: ds.cloneWithRowsAndSections(props.ListData)
      }
  }

  componentWillReceiveProps(nextProps){
    const dataSource = this.state.dataSource.cloneWithRowsAndSections(nextProps.ListData);
    this.setState({dataSource});
  }


  componentWillMount(){
    // console.log("whats This: ",this.props.ListData);
    let data = this.props.ListData;
    this.setState({
      dataSource: this.ds.cloneWithRowsAndSections(data)
    });
  }

在构造函数中,我尝试将render(){ console.log('TopNews', this.state.TopNews); if(this.state.TopNews.length == 0){ return( <View style={styles.container}> <View style={styles.LiveStyle}> <Live style={styles.LiveStyle} /> </View> <View style={styles.container}> <Text style={[styles.NotFollowTeamMsg, styles.centerTeamMsg]}> Your not connected to the api </Text> </View> </View> ) } else { return ( <View style={styles.container}> <NewsList ListData={this.state.TopNews} /> </View> ) } } 更改为const ds = ...,但这只会导致错误:

  

ds未定义   ReferenceError:ds未定义

我尝试取出构造函数:

this.ds = ...

然后在NewsList类之外找到它,我const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 != row2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2 }); ,就像这样:

setState

但这只会导致错误:

  

无法读取未定义TypeError的属性'bind':无法读取   属性'bind'未定义

1 个答案:

答案 0 :(得分:2)

2个选项:

1.在您的构造函数中,将const ds = ...设为this.ds = ...

2.从constructor函数中取出它:

const ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 != row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});

并将其定位在NewsList类之外。

现在,当你setState时,就这样做:

this.setState({
  dataSource: ds.cloneWithRowsAndSections(data)
});