React-Native ListView 导致 GraphQL 结果出错

Question

React-native 的新手我希望以下内容能够根据我在 ListView 周围看到的信息工作。

当我在 Android 模拟器中运行应用程序时，出现以下错误

就在错误之前，我看到了警告...

此页面上的代码是...

import React, { Component, PropTypes } from 'react'
import { View, Text, ListView } from 'native-base';

import { graphql } from 'react-apollo';
import gql from 'graphql-tag'

class RootContainer extends Component {
    render() {
        return (
            <View>
                <MatchData />
            </View>
        )
    }
}

class MatchView extends Component {
    render() {
        if (this.props.data.loading) {
            return (<Text>Loading...</Text>)
        }
        else {
            if (this.props.data.error) {
                return (<Text>error: {JSON.stringify(this.props.data.error)}</Text>)
            } else {
                return (<ListView
                    dataSource={this.props.data.getMatchList}
                    renderRow={(rowData) => <Text>{rowData.name}</Text>}
                    />)
            }
        }
    }

}

MatchView.propTypes = {
    data: PropTypes.shape({
        loading: PropTypes.bool,
        error: React.PropTypes.object,
        getMatchList: PropTypes.array
    }).isRequired
};

const QueryMatches = gql`
    query templates { 
        getMatchList {
            id,
            name, 
        } 
    }
`;

const MatchData = graphql(QueryMatchList)(MatchView)

export default RootContainer;

代码中不起作用的部分是：

return (<ListView
   dataSource={this.props.data.getMatchList}
   renderRow={(rowData) => <Text>{rowData.name}</Text>}
/>

getMatchList 的结果是来自 graphQL 响应的标准数组。如果我完全删除 ListView 则不会显示任何错误或警告（如果我将其替换为虚拟文本... <Text>it works</Text>）

不确定这里出了什么问题。

是否需要转换？

Answer 1

问题已解决...

由于我使用的是 native-base，所以 ListView 实际上是 List 和 ListItem。所以答案是...

List native-base docs

import {
    View,
    Text,
    List,
    ListItem,
} from 'native-base';

渲染方法为：

return (<List dataArray={this.props.data.getMatchList}
                renderRow={(item) =>
                    <ListItem>
                        <Text>{item.name}</Text>
                    </ListItem>
                }>
            </List>

看起来这个错误在观察者中很普遍。

React-Native ListView 导致 GraphQL 结果出错

React-Native ListView causing error from GraphQL result

reactjs

graphql

react-native