Javascript 使用上下文API传递数据时未定义值

我试图通过上下文API将数据传递给子组件。值是从组件获取时获取的

未定义的

组件层次结构：

• 将数据传递到组件

  MockTable

  和

  UsecasePane

• MainContent->MockTable

• MainContent->AddMock->TabContent->UsecasePane

=>MockContext.js

当我尝试在

MockTable

或

UseCasePane

中获取数据时，值为

未定义

// 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>
  );

---

传递到

提供程序
的正确道具是
值
，不是
数据
。（见：）


从“React”导入React，{useState，useffect，createContext}；
从“axios”导入axios；
export const MockContext=createContext（）；
//提供者
导出常量MockProvider=（道具）=>{
const[data，setData]=useState（[]）；
const fetchData=async（）=>{
常数响应=等待axios
.get（config.App_URL.getAllRoute{
参数：{
customHostName:config.host，
type:config.type，
},
})
.catch（（错误）=>{
错误（`error in fetching the data${error}`）；
});
console.log（response.data）；
setData（response.data）；
};
useffect（（）=>{
fetchData（）；
}, []);
返回(
{props.children}
);
};
没有错误，对吗？什么是未定义的？您记录的是数据1而不是数据？@AyushWalia:有错误。它将显示对象不可iterable，因为该值为undefined@codemax：对不起！打字错误请再次检查：）response.data是数组吗？是否在中正确设置了？我建议只清除重要的行的代码块。由于您复制了整个代码块，但只更改了一件事，因此答案当前包含大量噪声。我将只显示
行或整个return语句。返回语句上面的所有内容只会使答案的可读性降低。感谢@codeMax:）和3limin4t0r的建议。我会清理代码块
// 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


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