我想使用上下文api,以便可以传递函数。我的上下文api有效,但是我的组件未在屏幕上呈现

时间:2019-09-30 20:54:26

标签: reactjs react-native react-redux react-native-android react-context

如何在此处呈现上下文API中包装的视图

import React, { Component } from 'react';
import { storeProducts, detailProduct } from "./data";
import { StyleSheet } from "react-native";
const AccountContext = React.createContext();
//Provider : provides data
//Consumer : access data


class AccountProvider extends Component {
    state = {
        IsLoggedIn: true,
        Account: {},
        products: [],
        dettailProduct: detailProduct,
        cart: [],
        progressbar: false
    };

    componentDidMount() {
        this.setProducts();
    }
    setProducts = () => {
        let tempproducts = [];
        storeProducts.forEach(item => {
            const singleitem = { ...item }; //three dots indicate comping value not referencing
            tempproducts.push(singleitem);
        });
        this.setState(() => {
            return { products: tempproducts };
        });
    };

    onLogin = async (username, password) => {
        console.log("Hello from LogIn")


    }


    render() {
        return (
        // I am able to access value from my context API but my wrapped views are not rendering.
            <AccountContext.Provider
        Passing these functions

                value={{
                    ...this.state,
                    setProducts: this.setProducts,
                    onLogin: this.onLogin
                }}
            >
                {this.props.children}
            </AccountContext.Provider >
        );
    }
}
const AccountConsumer = AccountContext.Consumer;
export { AccountProvider, AccountConsumer };
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { AccountConsumer } from "../../context"
class ReorderItems extends Component {

    render() {
        return (
            <AccountConsumer>
                {(value => {
        // I am able to access value from my context API but my wrapped views are not rendering.

                    <View style={styles.container} >
                        <Text>ReOrderItems</Text>
                        <Text>ReOrderItems</Text>
                        <Text>ReOrderItems</Text>
                        <Text>ReOrderItems</Text>
                        <Text>ReOrderItems</Text>
                    </View>
        // I am able to access value from my context API but my wrapped views are not rendering.

                })}
            </AccountConsumer>

        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default ReorderItems;

我能够从我的上下文API访问值,但是我的包装视图未呈现。

0 个答案:

没有答案