javascript - 将数组对象渲染到 FlatList React Native
问题描述
我通过我的 API 从 axios 获取数据,但是当我渲染它的数据时,它会向我显示空白模板。如果我做错了什么,请告诉我。我用 api 响应粘贴了我的代码。谢谢
console.log => response.data
Data Array [
Object {
"ID": 2466,
"ItemName": "WWE2K20"
}
]
我的组件
import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { View, StyleSheet, FlatList, Image } from 'react-native';
import axios from 'axios';
export default class HomeScreen extends Component {
constructor() {
super()
this.state = {
itemList: []
}
}
async componentDidMount() {
await axios.get('myapiuri')
.then((response) => {
this.setState({
itemList: response.data
});
console.log("Data", this.state.itemList)
})
.catch(error=>console.log(error))
}
render() {
return (
<Container>
<Content>
<FlatList
data={this.state.itemList}
renderItem={(item) => {
return(
<Text>{item.ItemName}</Text>
);
}}
keyExtractor={(item) => item.ID}
/>
</Content>
</Container>
);
}
}
解决方案
我看到了一些问题。
首先,您需要在 renderItem 中使用 ({item}),如评论中所述。
其次,您将 async/await 与 then 块混合在一起。在这种情况下,不需要异步/等待。
所以你的代码必须是:
export default class HomeScreen extends Component {
constructor() {
super();
this.state = {
itemList: []
};
}
componentDidMount() {
axios
.get("myapiuri")
.then(response => {
this.setState({
itemList: response.data
});
console.log("Data", this.state.itemList);
})
.catch(error => console.log(error));
}
render() {
return (
<Container>
<Content>
<FlatList
data={this.state.itemList}
renderItem={({ item }) => {
return <Text>{item.ItemName}</Text>;
}}
keyExtractor={item => item.ID}
/>
</Content>
</Container>
);
}
}
如果您仍然遇到问题,请查看以下示例:
推荐阅读
- azure-active-directory - 无法更新 Azure 门户上的 B2C 本地用户个人资料照片/使用带有应用程序颁发令牌的 Graph
- excel - 如何将 Excel VBA 类集合合并到接口/工厂方法中?
- typescript - 对于类型化对象,对“any”值的不安全成员访问
- swiftui - 使用非零值初始化可选的 @AppStorage 属性
- prometheus - Prometheus 如何包含缺失的实例指标
- reactjs - 在一个组件中找不到模块错误,但在其他组件中可以找到它
- amazon-cloudformation - 为 KMS 密钥添加多个 Principal 值
- unity3d - 我想做一个统一的P2P联网(考虑用镜像)游戏,没有专用服务器,类似于泰拉瑞亚和瓦尔海姆
- python - 无法弄清楚如何为 Django 中的 psycopg2.errors.NotNullViolation 正确“断言”
- gradle - Gradle 通过插件添加对另一个源集的依赖