Я хочу использовать контекстный API, чтобы я мог передать свою функцию. Мой контекстный API работает, но мой компонент не отображается на экране - PullRequest
Новая
       29

Я хочу использовать контекстный API, чтобы я мог передать свою функцию. Мой контекстный API работает, но мой компонент не отображается на экране

0 голосов
/ 30 сентября 2019

Как отобразить представление, заключенное в контекстный интерфейс 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 контекста, но мои упакованные представления не отображаются.

...