如何从 GlobalContext 中的函数获取返回值？

Question

我有两个函数，一个是GetUsers()，另一个是GlobalContextManager.js中的GetDiscussion()

在MainScreen.js 中，我可以从GetUsers() 获取返回值，但我无法从GetDiscussion() 获取值

这里是GlobalContextManager.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;
        }
      }
    
      const GetDiscussion = () => {
        const returnFromService = {
          "errorCode": -1,
          "data": {
            "cards": [
              {
                "isLive": true,
                "type": "Topic",
                "title": "Human Resources Analysis",
                "author": "Emran Emon",
                "attendees": 12,
                "color": "#FFF9F2",
                "circles": [
                  "white",
                  "yellow",
                  "red",
                  "gray"
                ],
                "attendeesColor": "pink"
              },
              {
                "isLive": false,
                "type": "Topic",
                "title": "React Native Course UI",
                "author": "Matias Delgado",
                "attendees": 12,
                "color": "#E7FBFF",
                "circles": [
                  "white",
                  "yellow",
                  "red",
                  "gray"
                ],
                "attendeesColor": "pink"
              }
            ]
          }
        }
      }
    
      if (returnFromService.errorCode === -1) {


const returnFromGlobal = returnFromService.data.cards;

        return returnFromGlobal;
      } else {
        return returnFromService.errorCode;
      }
    
     
    
      return (
        <GlobalContext.Provider value={{ GetUsers, GetDiscussion }}>
          {props.children}
        </GlobalContext.Provider>
      );
    }
    
    export default GlobalContextManager;

Here is related part in MainScreen.js

import { GlobalContext } from '../../context/GlobalContextManager';
const MainScreen = ({ navigation }) => {
  const global = useContext(GlobalContext);

  const getUsers = () => {

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

    const g_users =  global.GetUsers();
    const tmpUsers = g_users.map((a,index) =>  <HorizontalCircles key={index} colorFirst={a.colorFirst} colorSecond={a.colorSecond} />)
    
    setTimeout(() => {
      setUsers(tmpUsers);
    }, 5000);

  }

const getDiscussion = () => {
    console.log("Getting Discussion Card")
    const g_discussion = global.GetDiscussion();
    const tmpHorizontal = g_discussion.map((a, index) => <HorizontalDiscussion key={index} color={a.color} /> )

    setTimeout(() => {
      setHorizontalDiscussion(tmpHorizontal);
    }, 3000);

  }

第一个功能有效，但另一个无效。它说第二个“找不到变量：returnFromService”。 我认为如果我更改此变量名会起作用，因为我在第一个函数中使用了它，但它仍然不起作用。

Answer 1

尝试用以下代码替换您的代码 实际上，您在封闭函数的大括号后使用了变量

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;
    }
  }

  const GetDiscussion = () => {
    const returnFromService = {
      "errorCode": -1,
      "data": {
        "cards": [
          {
            "isLive": true,
            "type": "Topic",
            "title": "Human Resources Analysis",
            "author": "Emran Emon",
            "attendees": 12,
            "color": "#FFF9F2",
            "circles": [
              "white",
              "yellow",
              "red",
              "gray"
            ],
            "attendeesColor": "pink"
          },
          {
            "isLive": false,
            "type": "Topic",
            "title": "React Native Course UI",
            "author": "Matias Delgado",
            "attendees": 12,
            "color": "#E7FBFF",
            "circles": [
              "white",
              "yellow",
              "red",
              "gray"
            ],
            "attendeesColor": "pink"
          }
        ]
      }
    }
  // } remove it from here

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

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

export default GlobalContextManager;