useContext 给出未定义

Question

我正在尝试从我的父组件传递值以进行一些 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 调用，但我已在此处删除它以减少问题的大小。你们谁能告诉我们可能是什么问题。

Answer 1

我认为这是由于 Travel.jsx 中的导入语法所致。

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

例如：

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

useContext 给出未定义

useContext is giving undefined

reactjs

react-redux

react-hooks

react-context

react-state