javascript - 如何处理返回陈旧事件处理程序的 React 钩子

Question

我试图弄清楚如何处理由钩子返回的陈旧事件处理程序。首先，当组件首次呈现时，它会向 api 发出异步请求以获取凭据。然后在对话框中按下提交按钮以创建资源时使用这些凭据。问题是即使在获取凭据之后，对话框提交按钮单击事件处理程序的凭据也未定义。

凭证.js

import { useEffect } from 'react';
import { api } from './api';

export const useCredentials = (setCredentials) => {
  useEffect(() => {
    const asyncGetCredentials = async () => {
      const result = await api.getCredentials();
      if (result) {
        setCredentials(result);
      }
    };
    asyncGetCredentials().then();
  }, []);

  return credentials;
}

使用组件.js

import { useEffect, useRef, useCallback, useState } from 'react';
import { useCredentials } from './credentials';
import { createResource } from './resources';
import { useDialog } from './useDialog';

export const useComponent = () => {
  const { closeDialog } = useDialog();
  const [credentials, setCredentials] = useState();
  useCredentials(setCredentials);

  const credentialsRef = useRef(credentials);

  useEffect(() => {
    // logs credentials properly after they have been fetched
    console.log(credentials) 
    credentialsRef.current = credentials;
  }, [credentials]);

  const createResourceUsingCredentials = useCallback(
    async function () {
      // credentials and credentialsRef.current are both undefined
      // even when the function is called after the credentials
      // have already been fetched.
      console.log(credentials);
      console.log(credentialsRef.current);

      createResource(credentialsRef.current); 
    }, [credentials, credentialsRef, credentialsRef.current]
  );

  const onDialogSubmit = useCallback(
    async function () {
      await createResourceUsingCredentials();
      closeDialog();
    }, [
      credentials,
      credentialsRef,
      credentialsRef.current,
      createResourceUsingCredentials,
    ],
  );

  return {
    onDialogSubmit,
  }
}

标签： javascriptreactjsreact-hooksclosures

Answer 1

为什么要增加复杂性，总是返回函数并在函数内部检查 credentials

export const useComponent = () => {
    const { closeDialog } = useDialog();
    const credentials = useCredentials();

    // correctly logs undefined at first and updated credentials
    // when they are asynchronously received from the api.
    console.log(credentials);

    async function createResourceUsingCredentials() {
        createResource(credentials);
    }

    let onClickDialogSubmit = async () => {
        if (credentials) {
            await createResourceUsingCredentials();
            closeDialog();
        }
    };

    return {
        onClickDialogSubmit,
    }
}