Javascript 使用异步API调用的钩子调用无效

我试图在我的功能组件中使用react钩子，如

usemo

或

useffect

。API调用是异步的，我认为这可能是导致错误的原因

服务文件：

export const getData = (): wretch =>
  fetch('/d/get_data')
    .get()
    .json();

数据格式化逻辑文件：

import {getData} from './services';

export const formatData = (onClick, onSort) => {
  // logic here - omitted
  const formattedData = [];
  return getData().then(res => {
    res.forEach( 
      // more data formatting logic
    )
    return {formattedData: formattedData, originalData: res};
})};

渲染文件：

import {formatData} from './formatData';

const MyTable = () => {
  useEffect(() => formatData({onClick: handleClick, onSort: handleSort}).then(res => setData(res)), []);

错误消息：

---

关于不能在useEffect中使用异步代码的部分，您是正确的。解决方法与您正在做的类似

useEffect(() => {

  async function myfunc(){
    // Do async work
    const response = await apiCall();
    setData(response);

  }
  myFunc();
},[]) 

这可能无法回答您的问题，但这是您可能会发现有用的常见模式：）

请尝试此模式

const MyTable = () => {
  useEffect(async () => {
    const data = await formatData({onClick: handleClick, onSort: handleSort});
    setData(data);
  },
  []);
}

---

MyTable是React组件吗？它是否返回jsx？