React Native 数据未显示在FlatList中

eqoofvh9  于 2023-02-09  发布在  React
关注(0)|答案(1)|浏览(248)

我在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,
    },
});

这个问题的根本原因可能是什么。看起来,有很小的问题,但还没能找到。

ogsagwnx

ogsagwnx1#

cartItems按如下方式设置后,您的组件不会重新呈现:

cartItems = [...JSON.parse(orderArray)]

它将cartItems作为初始状态的空数组,并且不显示任何数据,因此您应该使用this.setState重新呈现组件,正确的方法如下所示:

this.setState({cartItems: [...JSON.parse(orderArray)]})
    • 更新日期:**
  • 现在您已正确设置数据,
  • 但是当你在设置数据时,数据是很重要的。

如果您的数据最初可从本地存储中获得,则它将适用于您的代码,但如果数据最初不可从本地存储中获得,则您需要使用正确设置它们
componentDidMount()componentDidUpdate(),具体取决于应用场景(工作逻辑)。
则只有本地存储更新中的数据才会反映在组件中。
您也可以在这里阅读更多详细信息:https://reactjs.org/docs/react-component.html
同时检查The Component Lifecycle

相关问题