我怎样才能到达我命名为“全局"的变量?从全局上下文? [英] How can I reach the variable which i named "global" from GlobalContext?

问题描述

我有一个 GlobalContext.js 文件.我想通过使用名为global"的变量来达到这一部分.在我的主屏幕中.但它没有看到.我的错误在哪里?

I have a GlobalContext.js file. I want to reach this part by having a variable named "global" in my MainScreen. But it doesn't see it. Where could be my mistake?

我认为我所做的是正确的，但它不起作用

I thought what I did was correct, but it doesnt work

这里是 GlobalContext.js

Here is GlobalContext.js

import React, { createContext, useContext, useState } from 'react';
import HorizontalCircles from "../components/HorizontalDiscussion";
import HorizontalDiscussion from "../components/HorizontalDiscussion";


export const GlobalContext = createContext();

function GlobalContextManager(props) {

  const GetUsers = () => {
    const returnFromService = {
      "errorCode": -1,
      "data": {
        "colors": [
          {
            colorFirst:"red",
            colorSecond:"black",
          },
          {
            colorFirst:"pink",
            colorSecond:"gray",
          }
        ]
      }
    }; 

    if (returnFromService.errorCode === -1) {
      const returnFromGlobal = returnFromService.data.colors;
      return returnFromGlobal;
    } else {
      return returnFromService.errorCode;
    }
  }


  return (
    <GlobalContext.Provider value={{ GetUsers }}>
      {props.children}
    </GlobalContext.Provider>
  );
}

export default GlobalContextManager;

这里是 MainScreen.js 的相关部分

and here is the related part of MainScreen.js

import { GlobalContext } from '../../context/GlobalContext';

const MainScreen = ({ navigation }) => {

  const global = useContext(GlobalContext);

// here is skeleton
const [users, setUsers] = useState([
    <HorizontalCircles
      skeleton={true}
      key={0}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
    <HorizontalCircles
      skeleton={true}
      key={1}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
  ]);

 const getUsers = () => {

    console.log("users from global:",global.GetUsers());

    const g_users =  global.GetUsers(); // when i ctrl click on GetUsers() it says any...
    const tmpUsers = g_users.map((a,index) =>  <HorizontalCircles key={index} colorFirst={a.colorFirst} colorSecond={a.colorSecond} />)
       
    setTimeout(() => {
      setUsers(tmpUsers);
    }, 5000);

  }


useEffect(() => {
    getUsers();
  }, [])

我在 MainScreen.js 的某个地方写了 {users} 以作为回报

and i wrote {users} somewhere in return in MainScreen.js

这里是 Horizo​​ntalCircles.js

here is HorizontalCircles.js

import React from "react";
import { View, Text, TouchableOpacity, TouchableHighlight } from "react-native";

const HorizontalCircles = (props) => {

  return (
    // added TouchableHighlight to have more clickable area around circles
    <TouchableHighlight onPress={() => console.log("Circle is clicked")}>
      <View style={{ position: 'relative', height: 50, width: 50, borderColor: "white", borderWidth: 1, backgroundColor: props.colorFirst, elevation: 3, borderRadius: 25, marginHorizontal: 10, }} >
        <View style={{ position: 'absolute', right: 0, height: 15, width: 15, backgroundColor: props.colorSecond, borderRadius: 25, marginTop: 32 }} />
      </View>
    </TouchableHighlight>
    /* when i give elevation for the first View, the small circles lose a bit of their position */
  )
};

export default HorizontalCircles;

推荐答案

根据您的评论，

GlobalContextManager 必须用于 MainScreen 组件或它的父级.由于 createContext 在尝试使用 useContext 访问值时没有默认值，因此您将获得未定义的值.

GlobalContextManager must be used to or parent of MainScreen component. Since createContext has no default value when trying to access value with useContext, you will get undefined value.

例如，

<GlobalContextManager>
   <MainScreen />
</GlobalContextManager>

现在，您可以使用主屏幕组件中的上下文，您将获得提供程序中定义的值.

Now, you can use the context in main screen component and you will get the value defined in the provider.

这篇关于我怎样才能到达我命名为“全局"的变量?从全局上下文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！