javascript - FlatList 不渲染图像

Question

我遇到了 FlatList 问题，我正在尝试使用从数据库获取的数据来渲染图像。但什么也没有出现。我可以从控制台看到数据，正如您在此处看到的:

但是当我尝试访问照片时，它给了我两个错误:

1. 类型错误:无法读取未定义的属性“照片”
2. 警告:无法对已卸载的组件执行 React 状态更新。

现在我不知道为什么它给出未定义，而第二个错误我对此一无所知。

这是我对后端的请求:

    loadGames = async () => {
        const response = await api.get("/games")

        const  { games }  = response.data
        console.log(games)
        this.setState({ games })
    }

我在组件安装后立即发出请求，因此:

    componentDidMount() {
        this.loadGames();
        this.loadPlayers();
        console.log(this.state.games)     
    }

我已经声明了状态:

    state = {
        games:[],
        teams:[],
        players:[]
    }

现在是 FlatList:

<View style={{ height: 130, marginTop: 20, justifyContent:'center'}}>
    <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        data={this.state.games}
        keyExtractor={item => item._id}
        renderItem={({ item }) => this.renderGames(item)}
     />
</View>

我在renderItem中调用的方法:

renderGames = ({ item }) => {
    <View>
        <TouchableOpacity style={{flex:1/3, aspectRatio:1}} >
            <Image source={{ uri: `./image/games/${item.photo}` }} />
        </TouchableOpacity>
    </View>
}

有人知道我哪里做错了吗？我怎样才能让它发挥作用？

Answer 1

您的 renderGames 函数实际上没有返回任何内容。

renderGames = ({ item }) => (
    <View>
        <TouchableOpacity style={{flex:1/3, aspectRatio:1}} >
            <Image source={{ uri: `./image/games/${item.photo}` }} />
        </TouchableOpacity>
    </View>
)

应该可以。

此外，您应该将该函数传递给 renderItem 属性，而不是创建自己的箭头函数，因为您将 item 作为参数传递，但是然后解构另一个 item 属性:

renderItem={this.renderGames}