Início / coding / Perguntas / 79110785
Accepted
gene b.
Asked: 2024-10-21 23:44:20 +0800 CST

Função assíncrona reutilizada para definir variáveis ​​de estado distintas

  • 772

Tenho uma função assíncrona que busca um objeto DB ( Referral). Além da busca principal, várias outras partes do aplicativo também buscam auxiliares Referralspor meio da mesma função exata e sua lógica.

Uma função async não pode retornar nada, então não pode ser usada como um retorno genérico. Em vez disso, temos que definir uma variável de estado com os resultados dela.

Se eu fizer

const [mainReferral, setMainReferral] = useState<Referral|null>(null);

// Fetch main referral
const fetchReferral = async (referralId:string) => {
    const response = await get<any>("/referral/" + referralId);
    // Lots of logic below, e.g.
    response['specialDerivedField1'] = ...;
    response['specialDerivedField2'] = ...;
    //...
    setMainReferral(response);
}

Isso só lida com o caso único da referência principal. Eu também posso ter

const [auxReferral1, setAuxReferral1] = useState<Referral|null>(null);
const [auxReferral2, setAuxReferral2] = useState<Referral|null>(null);
//...

Eu realmente tenho que adicionar parâmetros diferentes a essa função para decidir o que definir com um if-else? Isso não parece muito robusto para mim.

const fetchReferral = async (referralId:string, case1:boolean, case2:boolean) => {
   //... 
   if (case1) 
      setAuxReferral1(response);
   else if (case2) {
      setAuxReferral2(response);
   else {
      setMainReferral(response);
   }
}

Alguma outra prática recomendada para isso? Ou talvez passar uma string para o nome da variável de estado e então encontrar o setter para ela pelo nome (não tenho certeza se o React suporta isso)?

Eu também adoraria isolar essa função utilitária em um arquivo utilitário separado que não lidasse com estado, mas como uma asyncfunção isso seria impossível, eu acho?

reactjs

1 respostas

  1. Best Answer

    Uma função assíncrona não pode retornar nada

    Quem te disse isso te desinformou. Ou você pode ter entendido mal o que estava sendo comunicado.

    Sua asyncfunção pode de fato retornar um resultado:

    const fetchReferral = async (referralId:string) => {
  // existing code, then...
  return response;
}

    E qualquer componente pode atualizar o estado com esse resultado:

    // using await:
const referral = await fetchReferral(someValue);
setMainReferral(referral);

// or using .then():
fetchReferral(someValue).then(setMainReferral);

    Alternativamente, se você preferir encapsular o tratamento Promisena própria função, você pode passar o(s) setter(s) de estado como um retorno de chamada. Por exemplo:

    const fetchReferral = async (referralId:string, callback:(x:any)=>{}) => {
  // existing code, then...
  callback(response);
}

    E qualquer componente fornecido passaria uma função como retorno de chamada:

    fetchReferral(someValue, setAuxReferral1);

    Outra opção poderia ser encapsular a operação e o estado dentro de um hook personalizado. Por exemplo:

    const useReferral = function () => {
  const [referral, setReferral] = useState();

  const fetchReferral = async (referralId:string) => {
    // existing code, then...
    setReferral(response);
  }

  return {
    referral, fetchReferral
  };
};

    E qualquer componente fornecido simplesmente usaria esse gancho:

    const { referral, fetchReferral } = useReferral();

// somewhere in your component logic:
fetchReferral(someValue);

// and use "referral" as the state value
    • 1

relate perguntas