useContext 给出未定义的答案

【问题标题】：useContext is giving undefineduseContext 给出未定义的
【发布时间】：2023-03-15 05:38:01
【问题描述】：

我正在尝试从我的父组件传递值以进行一些 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'。我认为这会解决你的问题

标签： reactjs react-redux react-hooks react-context react-state

【解决方案1】：

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

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

例如：

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

【讨论】：