使用上下文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>
);
};