我在React中显示一些数据。我从localStorage读取这些数据并在FlatList中显示。数据在数组中,但没有显示。
cartItems是包含此数据的数组,此数组将传递给FlatList。
cartItems = [{"food":"bread","foodPrice":"Rs. 100"},{"food":"bread","foodPrice":"Rs. 100"},
{"food":"bread","foodPrice":"Rs. 100"},{"food":"bread","foodPrice":"Rs. 100"},
{"food":"bread","foodPrice":"Rs. 100"}]
但没有显示任何数据。
Cart.js:
import React from "react";
import {
StyleSheet,
FlatList,
View,
Image,
TouchableOpacity,
Text
} from "react-native";
export default class Cart extends React.Component {
constructor() {
super();
this.state = {
cartItems: []
};
let orderArray = localStorage.getItem("Foods") // Get previously stored food items
let cartItems = []
if (orderArray !== null) {
//cartItems = [...JSON.parse(orderArray)]
this.setState({cartItems: [...JSON.parse(orderArray)]})
}
console.log("Cart: cartItems = "+JSON.stringify(cartItems));
}
renderItemComponent = (data) =>
<TouchableOpacity style={styles.container}>
<Image style={styles.image} source={{ uri: data.item.url }} />
</TouchableOpacity>
ItemSeparator = () => <View style={{
height: 2,
backgroundColor: "rgba(0,0,0,0.5)",
marginLeft: 10,
marginRight: 10,
}}
/>
render() {
return (
<View>
<FlatList
data={this.state.cartItems}
renderItem={({ item }) =>
<TouchableOpacity >
<Text >{item.food}</Text>
<Text >{item.foodPrice}</Text>
</TouchableOpacity>
}
ItemSeparatorComponent={this.ItemSeparator}
/>
</View>)
}
}
const styles = StyleSheet.create({
container: {
height: 300,
margin: 10,
backgroundColor: '#FFF',
borderRadius: 6,
},
image: {
height: '100%',
borderRadius: 4,
},
});
这个问题的根本原因可能是什么。看起来,有很小的问题,但还没能找到。
1条答案
按热度按时间ogsagwnx1#
cartItems
按如下方式设置后,您的组件不会重新呈现:它将
cartItems
作为初始状态的空数组,并且不显示任何数据,因此您应该使用this.setState
重新呈现组件,正确的方法如下所示:如果您的数据最初可从本地存储中获得,则它将适用于您的代码,但如果数据最初不可从本地存储中获得,则您需要使用正确设置它们
componentDidMount()
或componentDidUpdate()
,具体取决于应用场景(工作逻辑)。则只有本地存储更新中的数据才会反映在组件中。
您也可以在这里阅读更多详细信息:https://reactjs.org/docs/react-component.html
同时检查
The Component Lifecycle