使用 Typescript 导入函数

Question

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

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是 onClick function 的FuncComp和saveHandler是从帮助文件导入的，它看起来像这样：

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

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

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

Answer 1

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

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

导入和调用function

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

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