想要将数据传递给其他组件 - ListView

我已经添加并导入sample data。我想在list view中列出来自此文件的数据，并将数据传递给RenderRow的行组件。但得到错误说想要将数据传递给其他组件 - ListView

行（...）：必须返回一个有效的React元素（或null）。您可能返回了未定义的数组或其他无效对象。

import React, { Component } from 'react'; 
import { AppRegistry, View, ListView, Text, StyleSheet } from 'react-native'; 
import Row from './app/Row'; 
import data from './app/Data'; 

export default class ListViewDemo extends Component { 
    constructor(props) { 
    super(props); 
    const rowHasChanged = (r1, r2) => r1 !== r2 
    const ds = new ListView.DataSource({rowHasChanged}); 
    this.state = { 
    dataSource: ds.cloneWithRows(data), 
    }; 
    render() { 
    return (
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(data) => <Row {...data} />} // Getting error here 
    /> 
    ); 
    } 
} 
AppRegistry.registerComponent('DemoApp',() => ListViewDemo)

这些我的样本Data.js您可以检查data here。

export default data = [ 
    {...}, {...} 
];

Row.js：

const Row = (props) => { 
<View Style={styles.container}> 
    <Image source={{ uri: props.picture.large}} /> 
    <Text > 
    {`${props.name.first} ${props.name.last}`} 
    </Text> 
</View> 
}

会是什么问题呢？

来源

2017-07-26 Balasubramanian

你需要发布你的'Row'组件看起来像什么和你的实际'数据'看起来像什么的例子。否则，它可能是任何东西。 –

@MichaelCheng更新。 Plz现在检查 – Balasubramanian

ES6只有当没有明确的块返回：

const cb = (param) => param * 2;

你应该明确地返回：

const Row = (props) => { 
    return (
     <View Style={styles.container}> 
      <Image source={{ uri: props.picture.large}} /> 
      <Text > 
       {`${props.name.first} ${props.name.last}`} 
      </Text> 
     </View> 
    ); 
}

检查这个answer作进一步的解释。

来源

2017-07-26 12:44:20

Thanx mate。它的工作！并感谢您的资源。 – Balasubramanian

将此行更改为

renderRow={(data) => <Row {...data} />}

为了这

renderRow={(data) =><Row {...this.props} />}

这可以帮助你获得道具的行组件

来源

2017-07-26 12:38:46

想要将数据传递给其他组件 - ListView

回答

相关问题