我有以下情况：渲染功能在屏幕上显示一个FlatList：
render() {
console.log('In render');
const { data } = this.state;
console.log(data, 'data');
return (
<View style={styles.container}>
<View style={styles.searchContainer}>
<TextInput
placeholder="Type something!"
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>
<TouchableOpacity
onPress={this.onPressSearch}
>
<View>
<Text>Search</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.container}>
{data && data.list
? (
<FlatList
data={data.list}
renderItem={({ item }) => (
<View>
<Text style={styles.item}>
{item.name}
, Temp =
{' '}
{item.main.temp}
</Text>
<Text style={styles.item}>{item.weather[0].description}</Text>
<Image
source={{ uri: `http://openweathermap.org/img/wn/${item.weather[0].icon}@2x.png` }}
style={{ width: 100, height: 100 }}
/>
</View>
)
}
/>
)
: null
}
</View>
</View>
);
}
在一开始，我将这样的JSON文件传递给它：
{
"message": "accurate",
"cod": "200",
"count": 3,
"list": [
{
"id": 2641549,
"name": "Newtonhill",
"coord": {
"lat": 57.0333,
"lon": -2.15
},
"main": {
"temp": 275.15,
"pressure": 1010,
"humidity": 93,
"temp_min": 275.15,
"temp_max": 275.15
},
"dt": 1521204600,
"wind": {
"speed": 9.3,
"deg": 120,
"gust": 18
},
"sys": {
"country": ""
},
"rain": null,
"snow": null,
"clouds": {
"all": 75
},
"weather": [
{
"id": 311,
"main": "Drizzle",
"description": "rain and drizzle",
"icon": "09d"
}
]
},
{
"id": 2636814,
"name": "Stonehaven",
"coord": {
"lat": 56.9637,
"lon": -2.2118
},
"main": {
"temp": 275.15,
"pressure": 1010,
"humidity": 93,
"temp_min": 275.15,
"temp_max": 275.15
},
"dt": 1521204600,
"wind": {
"speed": 9.3,
"deg": 120,
"gust": 18
},
"sys": {
"country": ""
},
"rain": null,
"snow": null,
"clouds": {
"all": 75
},
"weather": [
{
"id": 311,
"main": "Drizzle",
"description": "rain and drizzle",
"icon": "09d"
}
]
},
{
"id": 2640030,
"name": "Portlethen",
"coord": {
"lat": 57.0547,
"lon": -2.1307
},
"main": {
"temp": 275.15,
"pressure": 1010,
"humidity": 93,
"temp_min": 275.15,
"temp_max": 275.15
},
"dt": 1521204600,
"wind": {
"speed": 9.3,
"deg": 120,
"gust": 18
},
"sys": {
"country": ""
},
"rain": null,
"snow": null,
"clouds": {
"all": 75
},
"weather": [
{
"id": 311,
"main": "Drizzle",
"description": "rain and drizzle",
"icon": "09d"
}
]
}
]
}
它可以正确渲染。比起我使用另一个JSON：
{
"coord": {
"lon": 27.56,
"lat": 53.9
},
"weather": [
{
"id": 520,
"main": "Rain",
"description": "light intensity shower rain",
"icon": "09d"
}
],
"base": "stations",
"main": {
"temp": 287.15,
"pressure": 1010,
"humidity": 82,
"temp_min": 287.15,
"temp_max": 287.15
},
"visibility": 10000,
"wind": {
"speed": 3,
"deg": 360
},
"clouds": {
"all": 75
},
"dt": 1564730938,
"sys": {
"type": 1,
"id": 8939,
"message": 0.0069,
"country": "BY",
"sunrise": 1564712669,
"sunset": 1564769250
},
"timezone": 10800,
"id": 625144,
"name": "Minsk",
"cod": 200
}
然后我将此对象设置为data变量，该变量保持状态。尝试设置新数据后，FlatList中的所有信息都将删除，并且不显示任何内容。我不明白这是怎么回事，因为当我在日志中观看render函数时，最后会用新数据调用它，那么为什么什么也没发生？
UPD
这是我获取和更新数据的方式：
onPressSearch = async () => {
const cityUrl = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.text}&apikey=8df903ce56f6d18245e72f380beb297d`;
const fetchData = await fetch(cityUrl).then();
const data = await fetchData.json();
this.setState({ data });
Alert.alert(data.name);
};
答案 0 :(得分：1)
您获取的数据与原始数据的形状完全不同，并且不包含list属性。这意味着当您重新分配onPressSearch方法时，它将以新形状呈现，该形状不包含list，因此不会呈现FlatList。
该获取的项目应添加到状态为原始数据中的现有list中。您可以执行以下操作：
onPressSearch = async () => {
const cityUrl = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.text}&apikey=8df903ce56f6d18245e72f380beb297d`;
const fetchData = await fetch(cityUrl).then();
const city = await fetchData.json();
const { data } = this.state;
data.list.push(city);
this.setState({ data });
};