useContext 给出未定义的

Posted 2023-04-14

【中文标题】useContext 给出未定义的

【英文标题】：useContext is giving undefined

【发布时间】：2020-06-13 22:24:21

【问题描述】：

我正在尝试从我的父组件传递值以进行一些 API 调用。我正在使用上下文在两个组件之间传递值，但我在控制台日志中未定义。请大家帮帮我。

父组件。

import Travel from './Travel'

export const TransactionAccountIdContext = createContext();

export default function Accounts() 

  const [accountId, setAccountId] = useState(0);
  const setTransactionAccountId = e => 
    console.log("Clicked ID", e.currentTarget.value);
    setAccountId(e.currentTarget.value);
  ;

  return (
    <div className=classes.root>
      <Button
        variant="contained"
        value=account.id
        onClick=setTransactionAccountId
        className=classes.button
        startIcon=<ReceiptIcon />
      >
        Show Transactions
      </Button>
      <TransactionAccountIdContext.Provider value="1212121">
        <Travel />
      </TransactionAccountIdContext.Provider>
    </div>
  );

子组件（Travel.jsx）

import TransactionAccountIdContext from "./accounts";

export default function MaterialTableDemo() 
  const accountId = useContext(TransactionAccountIdContext);
  console.log("accountId", accountId);

  return <h1>accountId</h1>;

我还在父组件和子组件中使用反应钩子进行一些 API 调用，但我已在此处删除它以减少问题的大小。谁能告诉我们可能是什么问题。

【问题讨论】：

能否请您稍微澄清一下您的问题。 console.log("accountId", accountId); 是否表示未定义或 return <h1>accountId</h1>; 为 accountId 返回未定义值。还有MaterialTableDemo 组件渲染在哪里

嗨@ShubhamKhatri 我在console.log("accountId", accountId) 和MaterialTableDemo 中变得未定义在父组件中呈现为Travel。为了更清楚，我添加了 import 语句。

您的代码看起来不错，我确定您没有向我们展示导致此行为的某些内容，请创建一个沙箱：codesandbox.io/s/q-60473444-fixopcode-hd8gb

确定@DennisVash。我会尽快在沙箱中发布我的代码。谢谢

尝试解构导入的上下文，例如：import TransactionAccountIdContext from './accounts'。我认为这会解决你的问题

【参考方案1】：

我相信这是由于您在 Travel.jsx 中的导入语法。

您的TransactionAccountIdContext 正在从父级导出为命名常量。它需要从子组件中的导入中解构。

例如：

/// Travel.jsx
import  TransactionAccountIdContext  from "./accounts";