使用 Context API 传递数据时值未定义

Posted 2023-04-14

【中文标题】使用 Context API 传递数据时值未定义

【英文标题】：Value is undefined while passing data with Context API

【发布时间】：2020-11-26 12:32:43

【问题描述】：

我正在尝试使用 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

【问题讨论】：

没有错误吧？

什么是未定义的？您正在记录 data1 而不是 data？

@AyushWalia：有错误。它将显示对象不可迭代，因为该值未定义

@codemax：对不起！错字。请再次检查:)

response.data 是一个数组吗？它在 中的设置是否正确？

【参考方案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>
  );
;

【讨论】：

我建议只将代码块清理到重要的行。答案目前包含很多噪音，因为您复制了整个代码块但只更改了一件事。我只会显示<MockContext.Provider value=...> 行或整个return 语句。 return 语句上方的所有内容只会使答案的可读性降低 imo。

感谢@codeMax :) 和 3limin4t0r 的建议。我会清理代码块