Значение не определено при передаче данных с помощью Context API

Question

Я пытаюсь передать данные с помощью Context API дочерним компонентам. Значение получает undefined при получении его из компонента.

Иерархия компонентов :

• передача данных в компонент MockTable и UsecasePane
• MainContent -> MockTable
• MainContent -> AddMock -> TabContent -> UsecasePane

=> MockContext. js

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

export const MockContext = createContext();

// provider
export const MockProvider = (props) => {
  const [data, setData] = useState([]);
  
   // data fetch and setting the state

  return (
    <MockContext.Provider data={[data, setData]}>
      {props.children}
    </MockContext.Provider>
  );
};

• Примечание: я получаю ответ от API.

Теперь в MainContent компоненты инкапсулируются следующим образом:

// MainContent.js

import React from "react";
import { MockProvider } from "../MockContext";

const MainContent = () => {
  return (
    <MockProvider>
      <div>
        <CustomerTable />
        <AddMock />
        <MockTable />
      </div>
    </MockProvider>
  );
};

Когда я пытаюсь получить данные в MockTable или в UseCasePane, значение равно undefined.

// MockTable.js

import React, { useState, useEffect, useContext } from "react";
import { MockContext } from "./MockContext";

const MockTable = () => {

  const [data, setData] = useContext(MockContext);
  console.log(data);

  // rest of the code

}

Пожалуйста, поправьте меня, где я ошибаюсь:)

Я также пытался передать строку из контекст и извлекается в компоненте, например:

return (
    <MockContext.Provider data={"Hello"}>
      {props.children}
    </MockContext.Provider>
  );

// in MockTable.js
const value = useContext(MockContext); ==> undefined

Answer 1

Правильная опора для передачи в Provider: value, не data. (См .: Context.Provider)

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

export const MockContext = createContext();

// provider
export const MockProvider = (props) => {
  const [data, setData] = useState([]);
  const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllRoute, {
        params: {
          customHostName: config.host,
          type: config.type,
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    console.log(response.data);
    setData(response.data);
  };
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <MockContext.Provider value={[data, setData]}>
      {props.children}
    </MockContext.Provider>
  );
};