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

Posted

技术标签:

【中文标题】React-Native with Redux:API 对象出现在我的 console.log 中,但不在我的视图中【英文标题】:React-Native with Redux: API objects appear in my console.log but not my view 【发布时间】:2016-06-25 05:41:27 【问题描述】:

我正在使用reactreact-nativereact-native-router-fluxreact-reduxredux 构建一个简单的体育应用程序,并试图将一个热门新闻对象的api 拉到我的view 中。我需要的对象显示在我的 console log 上,但无法让它显示在我的 view 上。

我得到的错误是:

无法读取未定义的属性“cloneWithRowsAndSections”

TypeError:无法读取属性“cloneWithRowsAndSections” 不明确的 在 NewsList.componentWillMount

我有什么遗漏的吗?

新闻列表:

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)
    );
  

News_View:

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 = ... 更改为this.ds = ...,但这只会导致错误:

ds 未定义 ReferenceError: ds 未定义

我尝试取出构造函数:

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

然后将其定位在 NewsList 类之外,我 setState,像这样:

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

但这只会导致错误:

无法读取未定义类型错误的属性“绑定”:无法读取 未定义的属性“绑定”

【问题讨论】:

【参考方案1】:

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)
);

【讨论】:

我已经尝试了这两个选项@gran33。出来的错误是:$ds is not defined ReferenceError: ds is not defined $ @Checkk 我也收到了你的错误,我的建议对我有用。您的班级不知道您的 ds 变量,因为您没有将其添加到 this.ds = ...

以上是关于React-Native with Redux:API 对象出现在我的 console.log 中,但不在我的视图中的主要内容,如果未能解决你的问题,请参考以下文章

[Redux] Generating Containers with connect() from React Redux (AddTodo)

React-native + Redux(Combine Reducers):创建状态结构

react-native 中的 Redux 错误

在react-native中使用redux

React-Native + Redux 将 ID 传递给组件

使用 redux 在 react-native 应用程序中保存访问令牌的最佳实践是啥?