Question

我已经修复了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]);
}

让我知道您的想法吗？

在useEffect Hook

1 个答案: