使用 Typescript 导入函数

Question

TLDR - 在 ReactJs 中使用 Typescript 的这些导入有什么区别：

setState1: (numbers: number[]) => void,
setState2: Function

大家好，我最近遇到了（对我而言）在 React 上使用 Typescript 导入函数的奇怪行为。为了更好地解释它，我将放示例代码：

const FuncComp: React.FC = () => {
   const [state1, setState1] = useState<number[]>([]);
   const [state2, setState2] = useState<number[]>([]);

   const handleSettingState1 = () => {
       console.log("state1-",state1);
       setState1([...state1, 1]);
   }
   console.log("state1-",state1);

   const handleSettingState2 = () => {
       console.log("state2-",state2);
       setState1([...state2, 2]);
   }
   console.log("state2-",state2);

   const saveChanges = () => {
       saveHandler(
          saveFunc,
          setState1,
          setState2
       )
   }
....
}

handleSettingState1 和 handleSettingState2 都是传递给子组件和从子组件设置的函数，saveChanges 是 FuncComp 内按钮的 onClick 函数，saveHandler 是从帮助文件导入的，它看起来像这样：

export const saveHandler = (
    saveFunc: GqlMutationType,
    setState1: (numbers: number[]) => void,
    setState2: Function
) => {
    saveFunc()
        .then(() => {
            setState1([]);
            setState2([]);
        })
        .catch((err: AxiosError) => {
            console.log(err);
        });
};

如您所见，setState1 和 setState2 的导入方式不同。 现在的问题是，当我通过处理程序设置两个状态时 -> 执行保存（它应该在 then 回调中清除两个数组） -> 设置另一个值，state1 内部和外部都将为空 @ 987654332@ 作用域，而state2 在handleSettingState2 内将具有旧值，但在类作用域内为空。

我在子组件中跳过了handleSettingState2 和handleSettingState2 的实现，因为我认为这无关紧要，但如果它影响到我也可以提供。

Answer 1

您可以像这样更新保存处理程序。

export const saveHandler = (
    saveFunc: GqlMutationType,
    cb: (data: any) => void
) => {
    saveFunc()
        .then(data => cb(data))
        .catch((err: AxiosError) => {
            console.log(err);
        });
};

导入和调用函数

import { saveHandler } from './filename';
...
...
function saveFn() {}

saveHandler(saveFn, (data) => {
   setState([...data]);
})