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

3htmauhk 于 2023-02-05 发布在 TypeScript

关注(0)|答案(1)|浏览(85)

我正在创建一个上下文函数，并在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获取相同值时，我可以看到存储的值。

typescript

来源：https://stackoverflow.com/questions/75304031/unable-to-get-react-context-value-in-js-function

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-02-05

我来回答

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

1条答案

相关问题

热门标签

最新问答