Question

我正在将React项目从JS转换为Typescript。为了组织代码，我使用带有自定义钩子函数的功能组件来获取数据，如下所示。但是，使用这些功能时，总是会遇到上述琐碎的错误。我已经找到了关于react版本不匹配的官方react页面，但在我的情况下似乎并非如此（https://reactjs.org/warnings/invalid-hook-call-warning.html）。知道可能是什么问题吗？

import { useEffect, useState } from 'react';

const usePostItemService = () => {
  const [result, setResult] = useState<>({
    status: 'loading'
  });

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(response => setResult({ status: 'loaded', payload: response }))
      .catch(error => setResult({ status: 'error', error }));
  }, []);

  return result;
};

export default usePostItemService;

上面的自定义钩子在函数组件中被简单地调用，如下所示：

const Items: React.FC<{}> = () => {
  const service = usePostItemService();

  return (
    <div>
     Hello
    </div>
  );
};

export default Items;

依赖关系当前设置如下：

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2"

只能在函数组件的主体内部调用Typescript挂钩

0 个答案: