React中如何向状态回调函数传递参数并获取最新值

你遇到的核心问题是闭包的快照特性加上bind方法的行为导致的：

1. 当你用this.closeMenu.bind(null, i0, event)绑定事件时，这里的i0是当前执行上下文里的固定快照值，闭包会把这个值“锁住”，后续即使i0更新，事件回调里拿到的还是第一次绑定的那个旧值。
2. 还有个隐藏坑：bind每次调用都会返回一个全新的函数，所以你后续调用document.removeEventListener('click', this.closeMenu)时，根本找不到之前绑定的那个函数，导致事件监听无法被正确移除，容易引发内存泄漏。

下面给你几个可行的解决思路，你可以根据自己的业务场景选择：

方案1：用React Ref存储最新的i0值 #

通过Ref来保存实时更新的i0，这样事件回调里总能拿到当前最新的值：

// 先在组件构造函数（类组件）或用useRef（函数组件）定义Ref
this.currentI0 = React.createRef();

// 在setState回调里更新Ref并绑定事件
this.setState({ idx: i0 === this.state.idx ? null : i0 }, () => {
  this.currentI0.current = i0;
  // 把绑定后的函数存到实例上，方便后续移除监听
  this.closeMenuHandler = (event) => this.closeMenu(event);
  document.addEventListener('click', this.closeMenuHandler);
});

// 修改closeMenu函数，从Ref中取最新的i0
closeMenu(event) {
  event.stopPropagation();
  const latestI0 = this.currentI0.current;
  console.log('当前最新的i0值：', latestI0);
  this.setState({ idx: null }, () => {
    document.removeEventListener('click', this.closeMenuHandler);
  });
}

方案2：利用组件状态传递最新值 #

如果i0本身可以关联到组件状态，那可以直接把i0存入state，在closeMenu里直接从状态中获取最新值：

// setState时同时把i0存入状态
this.setState({ 
  idx: i0 === this.state.idx ? null : i0,
  currentI0: i0 
}, () => {
  this.closeMenuHandler = (event) => this.closeMenu(event);
  document.addEventListener('click', this.closeMenuHandler);
});

closeMenu(event) {
  event.stopPropagation();
  const latestI0 = this.state.currentI0;
  console.log('当前最新的i0值：', latestI0);
  this.setState({ idx: null }, () => {
    document.removeEventListener('click', this.closeMenuHandler);
  });
}

方案3：用箭头函数动态获取值（注意存储函数引用） #

如果你不想用Ref或存状态，可以直接用箭头函数作为事件回调，这样每次触发时都会获取最新的i0，但必须把这个箭头函数存起来以便后续移除：

this.setState({ idx: i0 === this.state.idx ? null : i0 }, () => {
  // 把箭头函数存到实例上
  this.closeMenuHandler = (event) => {
    this.closeMenu(i0, event);
  };
  document.addEventListener('click', this.closeMenuHandler);
});

closeMenu(latestI0, event) {
  event.stopPropagation();
  console.log('当前最新的i0值：', latestI0);
  this.setState({ idx: null }, () => {
    document.removeEventListener('click', this.closeMenuHandler);
  });
}

• 永远不要直接在addEventListener里用bind或匿名箭头函数，除非你把生成的函数引用存起来，否则后续无法正确移除监听，会导致内存泄漏。
• 闭包对于基本类型（数字、字符串等）捕获的是值的快照，所以要通过Ref或组件状态这类“可变容器”来获取最新值。

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