React useState更新不及时：调用getCourses时状态未定义

setEnrollments 是异步操作，不会立即更新组件状态。当你在 setEnrollments 之后直接调用 getCourses() 时，组件状态还未完成更新，此时 getCourses 中访问的 enrollments 还是更新前的旧值（初始状态为 []，代码中多余的闭合括号也可能导致异常，出现 undefined）。

方法一：直接传递获取到的 enrollments 数据 #

既然你已经在 then 回调中拿到了最新的 enrollments 数据，直接把它作为参数传给 getCourses，不需要依赖状态更新：

const [enrollments, setEnrollments] = useState<Enrollment[]>([]);

// 修正语法错误：移除多余的闭合括号
client.v2().enrollments().fetch()
  .then((enrollmentsData) => {
    const fetchedEnrollments = enrollmentsData.enrollments;
    setEnrollments(fetchedEnrollments);
    // 直接传递最新数据
    getCourses(fetchedEnrollments);
  })

const getCourses = (currentEnrollments?: Enrollment[]) => {
  // 使用传入的最新数据， fallback 到状态值
  console.log(currentEnrollments || enrollments);
}

方法二：使用 useEffect 监听状态变化 #

利用 useEffect 钩子，在 enrollments 状态更新完成后自动触发 getCourses：

const [enrollments, setEnrollments] = useState<Enrollment[]>([]);

client.v2().enrollments().fetch()
  .then((enrollmentsData) => {
    setEnrollments(enrollmentsData.enrollments);
  })

// 监听 enrollments 变化，状态更新后执行 getCourses
useEffect(() => {
  // 避免初始空数组触发（可选，根据业务需求调整）
  if (enrollments.length > 0) {
    getCourses();
  }
}, [enrollments]); // 依赖项为 enrollments，状态变化时重新执行

const getCourses = () => {
  console.log(enrollments);
}

另外，注意你代码中的语法错误：client.v2().enrollments().fetch()).then(...) 多了一个闭合括号，这可能导致代码运行异常，需要修正。

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