React事件处理程序中如何获取计算后的memoized数据？

你遇到的问题核心是setState是异步的，调用setTheData后组件不会立刻重新渲染，所以memoizedData还是旧值。这里有几个符合React设计原则的解决办法：

1. 直接在事件处理中计算处理后的数据 #

如果这个复杂处理逻辑只在点击事件里需要，完全没必要用useMemo，直接在事件里调用处理函数即可：

const [theData, setTheData] = React.useState(null)

const buttonClick = async () => {
  const newData = await fetchTheData()
  const processedData = someComplexProcessOn(newData)
  setTheData(newData)
  // 直接使用processedData完成后续处理逻辑
}

这种方式最直接，完全符合React文档中「不要用useEffect响应用户事件」的建议，所有用户交互相关的逻辑都在事件处理函数内完成。

2. 抽离处理函数，兼顾缓存和事件使用 #

如果其他组件逻辑也需要用到处理后的数据，就把处理逻辑抽成独立函数，同时用于useMemo缓存和事件处理：

const [theData, setTheData] = React.useState(null)

// 抽离通用处理函数
const processData = (data) => {
  return someComplexProcessOn(data)
}

// 缓存处理结果供其他逻辑使用
const memoizedData = React.useMemo(() => {
  return processData(theData)
}, [theData])

const buttonClick = async () => {
  const newData = await fetchTheData()
  const processedData = processData(newData)
  setTheData(newData)
  // 使用processedData完成后续处理
}

这样既保留了memoizedData的缓存能力，又能在事件中直接拿到最新处理结果，不用等待组件重新渲染。

3. 用Ref存储最新缓存结果（兜底方案） #

如果处理逻辑依赖多个状态，useMemo的依赖项不止theData，必须依赖useMemo的计算结果，可以用useRef存储最新的缓存值，这样在事件中能直接访问：

const [theData, setTheData] = React.useState(null)
const memoizedDataRef = React.useRef(null)

const memoizedData = React.useMemo(() => {
  const processed = someComplexProcessOn(theData)
  memoizedDataRef.current = processed // 更新Ref存储最新值
  return processed
}, [theData])

const buttonClick = async () => {
  const newData = await fetchTheData()
  setTheData(newData)
  // 注意：这里如果要基于newData的处理结果，还是直接调用processData更可靠
  // 只有当处理逻辑依赖其他状态，必须等useMemo计算时，才考虑后续用useEffect结合标记状态
  // 但这种情况尽量避免，优先前面两种方案
}

为什么不推荐用useEffect？ #

React文档明确指出，useEffect是用来处理副作用（比如订阅外部数据源、操作DOM）的，而用户交互的逻辑应该直接在事件处理函数中完成。用useEffect响应事件会让代码逻辑分散、难以追踪，还可能因为状态依赖导致不必要的重复执行。

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