为什么 useEffect 钩子没有按预期工作 - 它与 useState 有什么关系？

Question

我是反应钩子的新手，在useEffect 我正在创建函数，该函数将在单击同一组件内的按钮时被调用。但我面临一个问题，每次它使用一个旧道具值，而不是新道具值。我不明白为什么。

如果我在 state 中分配 prop，它会正常工作，即使我没有使用 state 值，只是设置。

Try here

const defaultCalls = () => {
    let fn = (e) => console.log('This is default click fn.');
    return {
        overrideClickCall: (newFn) => {
            fn = newFn
        },
        clickFn: (e) => {
            fn(e);
        }
    }
}

let dCalls = defaultCalls();

const anotherFn = (e, userName) => {
  console.log(userName);
}

const MyComp = props => {
  let newFn = (e) => anotherFn(e, props.userName)

  //let [state, setState] = useState(props.userName);//on uncommenting it will work fine

  useEffect(() => {
    //setState(props.userName);  //on uncommenting it will work fine    
    dCalls = defaultCalls();
    dCalls.overrideClickCall(newFn);
    console.log('override default fn')
  }, [props.userName]);

  return (
    <input type="button" onClick={dCalls.clickFn} value="Click Me" />
  )
}

export { MyComp }

Answer 1

让我们考虑一下快照。只要你有一个属性值，组件函数就会使用当前的 props 值执行（函数体内引用任何 props 的所有内容都将替换为实际的 props 值）。在初始设置值之后，执行useEffect。在您的情况下，这意味着这一行：

<input type="button" onClick={dCalls.clickFn} value="Click Me" />

在useEffect 运行以更新您的defaultCalls 之前创建。所以它有一个过时的clickFn 副本。

你如何解决它：而不是onClick={dCalls.clickFn}，把它变成一个函数本身：onClick={(e) => dCalls.clickFn(e)}。

这样做，您将不会在 onClick 事件中使用任何记忆化版本的 clickFn。只有当用户点击按钮时，它才会抓取clickFn，因此，最新版本的clickFn。

顺便说一句，我真的希望你只是在做一些学习实验，因为这段包含如此多的间接代码的代码在短期内会成为枪。

我强烈推荐阅读：https://overreacted.io/a-complete-guide-to-useeffect/

这不是一个简短的阅读，但我可以用手指数数我在开发者文章中看到了多少次关于单个主题的如此透彻的解释。