React Native ListView項目未顯示

Question

我正在嘗試將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({

})

Answer 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 ，您應該使用單個對象來渲染行。

Answer 2

修復bug： renderRow={this.renderRowt} - > renderRow={this.renderRow.bind(this)}

重構代碼

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

- >

1-

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

2-

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

3-

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