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

我还在父组件和子组件中使用react钩子进行一些API调用，但我在这里删除了它，以减少问题的规模。请你们中的任何人告诉我们可能是什么问题。

Answer 1

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

您的TransactionAccountIdContext将作为命名常量从父级导出。它需要从子组件中的导入进行销毁。

例如：

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