REACT本机白色背景输出listView

Question

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

屏幕截图

这是我的代码

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添加 extraData prop导致重新渲染

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}
    />
   );
  }

还记录并验证您的数据存在。我建议指的是flatlist文档，以获取更多的道具，例如 keyExtractor等。