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

useContext给未定义

1 个答案: