typescript 无法在js函数中获取react上下文值

3htmauhk  于 2023-02-05  发布在  TypeScript
关注(0)|答案(1)|浏览(90)

我正在创建一个上下文函数,并在tsx文件的上下文中添加一些数据

const orderContext = useContext(OrderContext);
    orderDetail.userEmail = email;
    orderDetail.userName = firstName + ' ' + lastName;

当我尝试获取order.js文件[而不是tsx文件]中的值时

const orderContext = useContext(OrderContext);
console.log(orderContext.orderDetail.userEmail)

它显示空值,但当我尝试从tsx文件中的orderContext.orderDetail.userEmail获取相同值时,我可以看到存储的值。

lhcgjxsq

lhcgjxsq1#

您可以在这里尝试这个代码:

// context.tsx
import { createContext, useState, useContext } from 'react';

export const Context = createContext({
  order: { userEmail: '' },
  setOrder: () => {
    //
  },
});

export const OrderProvider = ({ children }) => {
  const [order, setOrder] = useState({ userEmail: '' });
  return (
    <Context.Provider value={{ order, setOrder }}>{children}</Context.Provider>
  );
};

// your page.tsx
export const Home = () => {
  const { order, setOrder } = useContext(Context);
  return (
    <div>
      <h1>{order.userEmail}</h1>
      <input
        type="text"
        onChange={(e) => setOrder({ userEmail: e.currentTarget.value })}
        value={order.userEmail}
      />
    </div>
  );
};

// routes.tsx
<OrderProvider>
  <Home />
</OrderProvider>

相关问题