修复 useEffect Hook 内的陈旧状态

Question

当 react 首次初始化状态对象时，我使用基于闭包的“陈旧”/旧状态值修复了 useEffect 回调的问题。 以前，在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]);

Answer 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]);
}

让我知道你怎么看？