反应本机 ListView 项目不显示答案

【问题标题】：React Native ListView Items not displaying反应本机 ListView 项目不显示
【发布时间】：2017-02-26 18:14:04
【问题描述】：

我正在尝试将 React Native <ListView /> 组件与来自 React Native Elements 的 <List /> 和 <ListItem /> 组件一起使用，但 <ListItem /> 组件未显示。不完全确定为什么。我的renderRow 函数不应该为我的数组中的每个对象运行并返回<Listitem /> 吗？我的数据正常。

请让我知道我做错了什么。谢谢！代码如下

import React, { PropTypes, Component } from 'react'
import { View, Text, ListView, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { List, ListItem } from 'react-native-elements'
import { getMakeData } from '~/redux/modules/data'

class Make extends Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        makeData: PropTypes.array.isRequired
    }
    constructor (props) {
        super(props)
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 })
        this.state = {
            dataSource: this.ds.cloneWithRows(this.props.makeData)
        }
    }
    componentDidMount () {
        this.props.dispatch(getMakeData())
    }
    renderRow = (item) => {
        return (
            <ListItem
                key={item.id}
                title={item.name}
            />
        )
    }
    render () {
        console.log(this.props.makeData)
        return (
            <List style={{flex: 1}}>
                <ListView 
                    renderRow={item => this.renderRow(item)}
                    dataSource={this.state.dataSource}
                />
            </List>
        )
    }
}

function mapStateToProps ({data}) {
    return {
        makeData: data.makeData
    }
}

export default connect(mapStateToProps)(Make)

const styles = StyleSheet.create({

})

【问题讨论】：

你能把console.log(this.props.makeData) 放在render 方法中并显示输出吗？？
@MayankShukla 是的，看起来componentDidMount 没有运行，因为我得到一个空数组作为console.log(this.props.makeData) 的输出，在我的组件中的任何内容运行之前，错误就被触发了。我也收到一个错误Warning: Failed prop type: Invalid prop 'dataSource' of type 'Array' supplied to 'ListView', expected instance of 'ListViewDataSource'.

标签： javascript listview reactjs react-native

【解决方案1】：

您的问题似乎是您没有正确使用renderRow。根据您的描述，makeData 是一个对象数组，因此在您的render 函数中，您使用该数组调用ListView，但renderRow 应该只呈现单行并且应该在每一行的数据中传递.因此，如下更改您的 renderRow 和 render 函数

renderRow (item) {
    return (
        <ListItem
            key={item.id}
            title={item.name}
        />
    )
}
render () {
    return (
        <List style={{flex: 1}}>
            <ListView 
                renderRow={(item) => this.renderRow(item)}
                dataSource={this.props.makeData}
            />
        </List>
    )
}

现在发生的事情是您告诉renderRow 这是您应该使用的对象。

您之前尝试使用数组makeData 渲染ListItem，您应该使用单个对象来渲染行。

【讨论】：

好的，我已经解决了这个错误，但现在我无法显示 <ListItem /> 组件。我已经更新了代码。
看看我是如何渲染ListView的。您需要将 item 传递给 this.renderRow

【解决方案2】：

修复错误： renderRow={this.renderRowt} -> renderRow={this.renderRow.bind(this)}

重构代码

function mapStateToProps ({ data }) {
    return {
        makeData: data.makeData
    }
}

function mapStateToProps ({ data:{makeData} }) {
        return {
            makeData,
        }
    }
    export default connect(mapStateToProps)(Make)

const mapStateToProps = ({ data:{makeData} }) => makeData
export default connect(mapStateToProps)(Make)

export default connect(({ data:{makeData} }) => makeData)(Make)

【讨论】：