ReactJS子组件提取数据经props传递报undefined如何解决

你遇到的报错和值不更新问题由两个原因直接导致：

1. 作用域错误：你在saveSavingGoalHandler函数内部用let重新声明了SaveGoalData变量，这个变量是函数作用域的局部变量，赋值操作仅在函数执行时生效，函数执行完就会被销毁，根本修改不到函数外部的同名变量，JSX渲染时找不到对应变量就会报未定义错误。
2. 非响应式变量无法触发重渲染：就算你把变量声明提到组件外部/组件顶层，普通let声明的变量不属于React的响应式状态，变量值修改后React不会感知到变化，也不会触发组件重渲染，JSX里永远只能读取到首次渲染时的初始空值，拿不到更新后的值。

使用React内置的useState Hook将需要跨组件传递的值声明为响应式状态，状态更新时React会自动触发组件重渲染，将最新值同步传递给子组件。
修复后的完整代码参考：

// 记得先从react导入useState
import { useState } from 'react';

function App() {
  // 保留你原有的AccountID、DefCategory等逻辑不变
  // 声明储蓄目标ID的响应式状态，初始值设为空字符串即可
  const [saveGoalData, setSaveGoalData] = useState("");

  const saveSavingGoalHandler = (savingsGoalID) => {
    // 移除内部的let声明，直接调用状态更新方法赋值
    setSaveGoalData(savingsGoalID);
    console.log(savingsGoalID);
  };

  return (
    <div className="App">
      <GetAccountName />
      <TransactionFeed
        accountUID={AccountID}
        defCategory={DefCategory}
        savingGoalId={saveGoalData}
      />
      <SavingsGoal
        accountUID={AccountID}
        defCategory={DefCategory}
        onSaveSavingGoal={saveSavingGoalHandler}
      />
    </div>
  );
}

• 所有需要在JSX中渲染、需要通过props传递给子组件、更新后需要同步视图的变量，都必须声明为React响应式状态（函数组件用useState/useReducer，类组件用this.state），不要用普通变量存储这类值。
• 注意变量作用域，不要在事件回调内重复声明和外层同名的局部变量，会出现作用域遮蔽，导致外层变量无法被正确赋值。
• 首次渲染时saveGoalData为空值属于正常现象，如果TransactionFeed组件依赖该值做逻辑计算，可以在组件内部加一层空值兜底，避免空值引发报错。

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