我正在通过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>
);
}
}
答案 0 :(得分:2)
我看到了一些问题。
首先,您需要按照注释中所述在renderItem中使用({item})。
第二,您将异步/等待与然后阻止混合在一起。在这种情况下,无需异步/等待。
因此您的代码必须是:
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>
);
}
}
如果仍然有问题,请查看以下示例:
答案 1 :(得分:1)
<FlatList
data={this.state.itemList}
renderItem={**(item)** => {
return(
<Text>{item.ItemName}</Text>
);
}}
keyExtractor={(item) => item.ID}
/>
在这里“ item”是一个对象,它具有ID和ItemName。当您像这样打电话时,该项目未被识别为对象,这就是为什么什么都没显示出来的原因,
({item})
您应该这样更改上述调用。然后将item识别为对象,您可以将其属性称为,item.Id或item.ItemName
我认为您理解我的代码为什么不起作用。请学习本机生命周期。 componentDidMount不想异步,在组件渲染之后,componentDidMount将在组件加载时一次调用并且componentWillMount调用,而组件的任何状态发生变化时都会调用componentWillReceiveProps。