修复 useEffect Hook 中的陈旧状态答案

【问题标题】：Fixing stale state inside useEffect Hook修复 useEffect Hook 中的陈旧状态
【发布时间】：2020-12-16 21:27:09
【问题描述】：

我已经解决了 useEffect 回调的问题，该回调使用基于闭包的“陈旧”/旧状态值，当反应首次初始化状态对象时。以前，当useEffect 回调在挂载后执行时，它只能访问第一个状态值，即null。我通过添加状态对象 isSignedIn 作为 useEffect 钩子的第二个参数解决了这个问题。现在 useEffect 会在每次调用 changeSignInStatus 时重新运行，这意味着在第一次渲染之后，useEffect 回调会第一次运行，但随后会使用更新的状态值再次运行。因此，我的应用可以访问新的状态值。

但是，理想情况下，我希望避免在状态对象更新时不断重新运行 useEffect 回调，因为我不想每次都重新加载 google auth 库。

有没有人知道我如何解决useEffect 钩子内的陈旧状态问题，而不必将我的状态对象作为第二个useEffect 参数？

function GoogleAuth(){

    const [isSignedIn,changeSignInStatus] = useState(null);

    var auth

    useEffect(()=>{
        //load client:auth2 library and define a callback
        window.gapi.load('client:auth2',()=>{
            window.gapi.client.init({
                clientId:"*****************************",
                scope:"email"
            }).then(()=>{
                auth = window.gapi.auth2.getAuthInstance();
                changeSignInStatus(auth.isSignedIn.get());
                auth.isSignedIn.listen(onAuthChange);
            });
        });


    },[isSignedIn]);

【问题讨论】：

没有在依赖数组中使用 isSignedIn 的情况下，您获得了哪些陈旧数据？
auth 将重新初始化为 undefined 每次重新渲染

标签： javascript reactjs react-hooks

【解决方案1】：

在这里添加它，因为建议很大。

第一个问题：当不在依赖数组中使用 isSignedIn 时，哪个值变得陈旧。 ?

第二次查看您的代码，我们可以进行这样的修复以避免重复加载库：

function GoogleAuth() {
  const [isSignedIn, changeSignInStatus] = useState(null);

  var auth;

  useEffect(() => {
    //load client:auth2 library and define a callback
    if (!isSignedIn) {
      window.gapi.load("client:auth2", () => {
        window.gapi.client
          .init({
            clientId: "*****************************",
            scope: "email",
          })
          .then(() => {
            auth = window.gapi.auth2.getAuthInstance();
            changeSignInStatus(auth.isSignedIn.get());
            auth.isSignedIn.listen(onAuthChange);
          });
      });
    }
  }, [isSignedIn]);
}

让我知道你的想法？

【讨论】：