React中使用Recompose withHandlers时Context的activeId值未更新的问题

你遇到的这个问题本质是React闭包陷阱——handleFileDrop函数在组件初始化时就捕获了当时的props引用，哪怕后续activeId通过closeModal更新为null，这个闭包里的props依然是旧值，所以不管你等多久打印的都是最初的activeId。

具体来说，recompose的withHandlers创建的handler函数默认会在组件挂载时一次性捕获当时的props，后续props更新不会重新生成这个handler（除非手动配置依赖）。而closeModal是通过更新Context状态来修改activeId，组件的props确实会更新，但handleFileDrop里的props还是被闭包锁定的旧版本。

根据你的组件类型，有几种不同的处理方式：

1. 类组件：使用this.props动态获取最新值 #

如果你的组件是类组件，直接用this.props代替闭包里的props即可——类组件的this.props始终指向最新的props，不会被闭包捕获固定值：

class YourComponent extends React.Component {
  handleFileDrop = async (files: File[]) => {
    this.props.closeModal();
    // 刚调用完closeModal时，状态更新是异步的，这里还是旧值
    console.log(this.props.activeId);
    setTimeout(() => {
      // 这里能拿到更新后的null，因为this.props是动态的
      console.log(this.props.activeId);
    }, 5000);
  };

  render() {
    // 组件渲染逻辑
    return <div>...</div>;
  }
}

export default withActiveModalData(YourComponent);

2. 函数组件+Hooks：用useRef同步最新值 #

如果是函数组件，推荐放弃recompose，改用原生Hooks结合useRef来保存最新的activeId：

import { useContext, useCallback, useRef, useEffect } from 'react';
import { ModalContext } from './你的Context路径';

const YourComponent = () => {
  const { activeId, closeModal } = useContext(ModalContext);
  // 用ref同步最新的activeId
  const activeIdRef = useRef(activeId);

  useEffect(() => {
    // 每次activeId更新时，同步到ref中
    activeIdRef.current = activeId;
  }, [activeId]);

  const handleFileDrop = useCallback(async (files: File[]) => {
    closeModal();
    setTimeout(() => {
      // 这里能拿到最新的null
      console.log(activeIdRef.current);
    }, 5000);
  }, [closeModal]);

  return <div>...</div>;
};

3. 继续使用recompose：调整handler的写法 #

如果你坚持使用recompose，可以把handleFileDrop改成接收最新props的函数式写法，调用时传入当前props：

const enhance = compose(
  withActiveModalData,
  withHandlers({
    // 改成返回一个接收props的函数
    handleFileDrop: () => (files: File[]) => async (props) => {
      props.closeModal();
      setTimeout(() => {
        console.log(props.activeId);
      }, 5000);
    },
  })
);

// 调用handler时要传入当前props
// 比如在组件中：props.handleFileDrop(files)(props)

不管哪种方案，核心都是打破闭包对旧props的锁定，让函数能获取到最新的props/状态值：

• 类组件靠this.props的动态特性
• 函数组件靠useRef同步最新状态
• recompose则靠手动传入最新props

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