主页 / coding / 问题 / 79110785
Accepted
gene b.
Asked: 2024-10-21 23:44:20 +0800 CST

重复使用异步函数来设置不同的状态变量

  • 772

我有一个异步函数，它获取一个 DB 对象 ( Referral)。除了主要获取之外，应用程序的其他各个部分也Referrals通过完全相同的函数及其逻辑获取辅助数据。

异步函数无法返回任何内容，因此不能将其用作通用返回值。相反，我们必须用其结果设置状态变量。

如果我这么做

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

这只处理主要转介的单个案例。我可能还会有

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

我是否真的必须向此函数添加不同的参数来决定使用 来设置什么if-else？这对我来说看起来不太可靠。

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

还有其他最佳实践吗？或者也许传入一个字符串作为状态变量名称，然后按名称找到它的设置器（不确定 React 是否支持它）？

我也很想将这个实用程序函数隔离到一个不处理状态的单独的实用程序文件中，但async我猜作为一个函数这是不可能的？

reactjs

1 个回答

  1. Best Answer

    异步函数不能返回任何内容

    无论是谁告诉你的，你都误解了。或者你可能误解了所传达的信息。

    你的async函数确实可以返回结果：

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

    并且任何给定的组件都可以使用该结果更新状态：

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

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

    或者，如果您希望将处理封装Promise在函数本身中，则可以将状态设置器作为回调传递。例如：

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

    并且任何给定的组件都会传递一个函数作为回调：

    fetchReferral(someValue, setAuxReferral1);

    另一个选择是将操作和状态包装在自定义钩子中。例如：

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

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

  return {
    referral, fetchReferral
  };
};

    任何给定的组件都只需使用这个钩子即可：

    const { referral, fetchReferral } = useReferral();

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

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

相关问题