React中useEffect内transactionId报初始化前无法访问错误排查

错误根因与修复方案 #

1. 直接触发报错的核心问题：变量重复声明导致暂时性死区 #

你在useEffect内部用const重新声明了一个和外部作用域同名的transactionId变量，还试图把自身赋值给自身。按照JS块级作用域规则，const声明的变量会进入暂时性死区，在声明完成前访问该变量就会抛出Cannot access 'transactionId' before initialization错误。
修复方式：直接删除useEffect内部多余的const transactionId = transactionId;这行代码，直接复用外部声明的transactionId变量即可。

2. Context取值错误 #

你从GlobalContext里解构的字段是transaction，但全局Context导出的状态字段是transactions（末尾多了s），这会导致你拿到的是undefined，调用find方法时会直接崩溃。
修复方式：把解构语句修改为const { transactions, editTransaction } = useContext(GlobalContext);，同时把useEffect里的find调用对象修改为transactions。

3. 类型不匹配导致查询不到对应交易 #

你全局状态里存储的交易id是字符串类型（比如"1"、"2"），但你在find判断时把transactionId用parseInt转成了数字，全等判断===会因为类型不同永远返回false，无法匹配到对应交易。
修复方式：直接按字符串对比即可，不需要转数字：

const selectedTransaction = transactions.find(
  (t) => t.id === transactionId
);

4. 其他可优化的问题 #

• formData取值错误：setSelectedTransaction是更新状态的方法，不是状态值，应该从selectedTransaction里取对应字段：

let formData = {
  name: selectedTransaction.name,
  amount: selectedTransaction.amount,
  category: selectedTransaction.category,
};

• 初始化selectedTransaction的字段和全局交易字段不匹配，全局状态里的交易有name、amount字段，你初始化时没有定义反而多了heading、author等不存在的字段，可以调整初始化字段避免后续赋值异常。

修复后完整的useEffect示例 #

const transactionId = match.params.id;
useEffect(() => {
  const selectedTransaction = transactions.find(
    (t) => t.id === transactionId
  );
  setSelectedTransaction(selectedTransaction);
}, [transactionId, transactions]);

内容的提问来源于stack exchange，提问作者Toan Lam