如何从 GlobalContext 获取我命名为 "global" 的变量？

Question

我有一个 GlobalContext.js 文件。我想通过在我的 MainScreen 中有一个名为“global”的变量来达到这一部分。但它没有看到它。我的错误在哪里？

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

这里是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

的相关部分

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

的 return 某处写了 {users}

这里是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;

Answer 1

在我的项目中，我开始使用 React 上下文并最终摆脱了它，因为它似乎没有增加那么多价值并且实际上引入了不必要的技术债务。我建议只拥有一个普通的 JavaScript 上下文对象，您可以在任何需要的地方导入它。您可以将此对象的属性设置为其他类的实例，或者只是您需要在整个应用程序中使用的任何值的简单值。这些值可以从应用程序的任何位置设置到该对象中。只是我的 2 美分。

Answer 2

根据您的评论，

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

例如，

<GlobalContextManager>
   <MainScreen />
</GlobalContextManager>

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

如何从 GlobalContext 获取我命名为 "global" 的变量？

How can I reach the variable which i named "global" from GlobalContext?

reactjs

react-native

use-context