如何将带参数的setState回调重构为useEffect实现

方案一：复用setState的回调函数（最贴近原逻辑） #

函数组件的setState同样支持第二个参数作为状态更新完成后的回调，和类组件逻辑完全一致，不需要额外使用useEffect：

const [varState, setVarState] = useState('');

const updateStuff = (index) => {
  setVarState('asdf', () => {
    props.dispatch(updateOther(index));
  });
};

每次调用updateStuff(index)时，状态更新完成后会立即执行回调，传入对应的index触发dispatch，和你原来的类组件行为完全一致。

方案二：用状态保存index配合useEffect #

如果一定要用useEffect实现，可以新增一个状态存储当前操作的index，让useEffect同时监听这个index和varState的变化：

const [varState, setVarState] = useState('');
const [currentIndex, setCurrentIndex] = useState(null);

const updateStuff = (index) => {
  // 先更新当前index
  setCurrentIndex(index);
  // 再更新目标状态
  setVarState('asdf');
};

useEffect(() => {
  // 确保index有效时再执行dispatch
  if (currentIndex !== null) {
    props.dispatch(updateOther(currentIndex));
  }
}, [varState, currentIndex, props.dispatch]);

为什么原来的写法不行？ #

你之前的useEffect仅依赖var，存在两个问题：

1. 闭包陷阱：useEffect的回调会捕获定义时的index，多次调用updateStuff时，后续的index无法被正确捕获；
2. 状态无变化不触发：如果var已经是'asdf'，再次调用setVar('asdf')不会触发状态更新，useEffect也就不会执行，无法触发dispatch。

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