无法在JS文件中获取React Context值的技术求助

核心问题 #

useContext是React Hook，只能在React组件（TSX/JSX文件的组件函数）或者自定义Hook内部调用。如果你的order.js是普通JS文件（非组件/自定义Hook），直接调用useContext不仅违反React Hook规则，还会导致无法正确获取Context值，拿到的是空默认值。

解决方式 #

方式1：把order.js的逻辑改成自定义Hook

将访问Context的逻辑封装成自定义Hook，这样就能合法调用useContext：

// order.js
import { useContext } from 'react';
import { OrderContext } from './你的Context文件路径';

export function useOrderDetail() {
  const orderContext = useContext(OrderContext);
  return orderContext.orderDetail;
}

然后在TSX组件中使用这个自定义Hook：

// 你的TSX组件文件
import { useOrderDetail } from './order.js';

function YourComponent() {
  const orderDetail = useOrderDetail();
  console.log(orderDetail.userEmail); // 这里能正常获取到值
}

方式2：给工具函数传参（如果order.js是工具文件）

如果order.js里是纯工具逻辑，不要在里面调用useContext，而是把orderDetail作为参数传入：

// order.js
export function logUserEmail(orderDetail) {
  console.log(orderDetail.userEmail); // 直接使用传入的参数
}

在TSX组件中调用时传入Context里的值：

// 你的TSX组件文件
import { useContext } from 'react';
import { OrderContext } from './你的Context文件路径';
import { logUserEmail } from './order.js';

function YourComponent() {
  const orderContext = useContext(OrderContext);
  logUserEmail(orderContext.orderDetail); // 传入orderDetail
}

额外检查 #

确认你的OrderContext.Provider已经包裹了所有需要访问该Context的组件，比如在根组件中：

// 根组件文件
import { useState } from 'react';
import { OrderContext } from './你的Context文件路径';

function App() {
  const [orderDetail, setOrderDetail] = useState({});

  return (
    <OrderContext.Provider value={{ orderDetail, setOrderDetail }}>
      {/* 所有需要访问Context的组件都要放在这里面 */}
      <YourComponent />
    </OrderContext.Provider>
  );
}

内容的提问来源于stack exchange，提问作者Bilal Rabbi