Question

我添加并导入了sample data。我想在list view中列出此文件中的数据，然后将数据传递给RenderRow的行组件。但是得到错误说

Row（...）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

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>
}

会出现什么问题？

Answer 1

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以获取进一步说明。

Answer 2

将此行更改为

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

到此

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

这可以帮助您在Component

行中获取道具

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

2 个答案: