React-Native ListView 导致 GraphQL 结果错误答案

【问题标题】：React-Native ListView causing error from GraphQL resultReact-Native ListView 导致 GraphQL 结果错误
【发布时间】：2017-05-11 07:05:36
【问题描述】：

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

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

它需要转换吗？

【问题讨论】：

标签： reactjs react-native graphql

【解决方案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>

看起来该错误在观察者中非常普遍。

【讨论】：