Listview

Question

我正在制作列表视图，我将查看数据库中的一些数据列表。但运行程序后我得到的只是白色背景屏幕。有谁知道解决方案？

screen shot

这是我的代码

export default class Pasta extends Component {
    constructor() {
        super()
        this.state = {
            dataSource: []
        }
    }

    renderItem = ({ item }) => {
    return (
            <View style = {{flex: 1, flexDirection: 'row'}}>
                <View style = {{flex: 1, justifyContent: 'center'}}>
                    <Text>
                        {item.menu_desc}
                    </Text>
                    <Text>
                        {item.menu_price}
                    </Text>
                </View>
            </View>
    )
    }

    componentDidMount() {
        const url = 'http://192.***.***.***:9090/menu'

        fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson.menu
            })
        })
    }

    render() {
        return (
            <View style = { styles.container }>
                <FlatList
                    data = { this.state.dataSource }
                    renderItem = {this.renderItem}
                />
            </View>
        );
    }
}

Answer 1

将FlatList道具添加到keyExtractor = (item, index) => item.id; // note: id is the unique key for each item render() { return ( <FlatList data = {this.state.dataSource} renderItem = {this.renderItem} extraData={this.state} keyExtractor={this.keyExtractor} /> ); } 以导致重新渲染

keyExtractor

同时记录并验证您的数据是否存在。我建议引用FlatList个文档来获取更多道具，例如{{1}}等。