Javascript 反应本机ListView项不显示

我试图将React Native

组件与React Native元素中的

和

组件一起使用，但

组件未显示。不完全清楚原因。我的

renderRow

函数是否应该为数组中的每个对象运行并返回

？我的数据很好

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

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({

})

import React，{PropTypes，Component}来自“React”
从“react native”导入{View，Text，ListView，StyleSheet}
从“react redux”导入{connect}
从“react native elements”导入{List，ListItem}
从“~/redux/modules/data”导入{getMakeData}
类生成扩展组件{
静态类型={
调度：需要PropTypes.func.isRequired，
makeData:PropTypes.array.isRequired
}
建造师（道具）{
超级（道具）
this.ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）
此.state={
数据源：this.ds.cloneWithRows（this.props.makeData）
}
}
组件安装（）{
this.props.dispatch（getMakeData（））
}
renderRow=（项目）=>{
返回(
)
}
渲染（）{
console.log（this.props.makeData）
返回(
this.renderRow（项目）}
dataSource={this.state.dataSource}
/>
)
}
}
函数MapStateTops（{data}）{
返回{
makeData:data.makeData
}
}
导出默认连接（MapStateTops）（生成）
const styles=StyleSheet.create({
})

您的问题似乎是您没有正确使用

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（项目）{
返回(
)
}
渲染（）{
返回(
this.renderRow（项目）}
dataSource={this.props.makeData}
/>
)
}

现在发生的是，您正在告诉

renderRow

这是您应该使用的对象

您之前所做的是尝试使用数组

makeData

渲染

ListItem

，其中您应该使用单个对象来渲染行

修复错误：

renderRow={this.renderRowt}

->

renderRow={this.renderRow.bind（this）}

重构代码

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

->

一,-

二,-

三,-

---

你能把

console.log（this.props.makeData）

放入

render

方法中并显示输出吗？？？@MayankShukla是的，看起来

componentDidMount

没有运行，因为我得到了一个空数组作为

console.log（this.props.makeData）的输出

该错误在我的组件中的任何东西运行之前触发。我还收到一个错误

警告：失败的道具类型：为“ListView”提供的类型为“Array”的无效道具“dataSource”，应为“ListViewDataSource”的实例。

好的，我已修复了此错误问题，但现在我无法显示

组件。我已经更新了代码。看看我是如何呈现ListView的。您需要将该项传递给this.renderRow

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)