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 экспортируется из родительского объекта в виде именованной константы. Его необходимо удалить из импорта в дочернем компоненте.

например:

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