如何将反应钩子用作打字稿的通用组件

Question

我有一个 SnackBar.ts 文件如下

import { useSnackbar } from 'notistack';

const SnackBar = (message:string, isError?:boolean) => {
  const { enqueueSnackbar } = useSnackbar();
  return enqueueSnackbar(message, {
    anchorOrigin: {
      horizontal: 'right',
      vertical: 'top'
    },
    variant: isError ? 'error' : 'success',
    style: { whiteSpace: 'pre-line' }
  });
};

export default SnackBar;

所以我开始在我的组件 tsx 中使用它，如下所示

    import { FC, useEffect, useState } from 'react';
    import { SnackBar } from '../../snackbar';

    const userEditForm: FC = (props) => {
    const mySnack = SnackBar;
    
    useEffect(() => {
        console.log('error');
        if (!loading && submitForm) {
          if (!error) {
            mySnack('user updated');
          } else {
            mySnack(error, true);
          }
        }
      }, [error, loading, submitForm]);
       
     return ( <MyComponent /> );
}

我收到此错误“Error: Invalid hook call. Hooks can only be called inside of the body of a function component”

错误来自这一行mySnack('user updated');

我想要做的就是使用enqueueSnackbar 作为共享方法。 我怎样才能在打字稿中做到这一点？

Answer 1

错误正是它所说的。根据 sn-p，您正在尝试在错误导入下方的函数之外调用 useEffect()。

试试这个，

import { SnackBar } from '../../snackbar';


const SomeComponent = () => {

const mySnack = SnackBar;

callSnack(){
console.log('error');
    if (!loading && submitForm) {
      if (!error) {
        mySnack('user updated');
      } else {
        mySnack(error, true);
      }
    }
}


useEffect(() => {
    callSnack();
  }, [error, loading, submitForm]);

return <div> Somehting </div>;
}

这应该可以解决您的问题，但不确定您为什么要重新分配给mySnack，您可以直接致电SnackBar(' ')。

此外，为了获得最佳实践，请使用扩展名 tsx 命名包含 React 组件的文件。