javascript - 异步 API 调用的无效 Hook 调用

Question

我正在尝试在我的功能组件中使用像 useMemo 或 useEffect 这样的 react 钩子(Hook)。 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)), []);

错误消息:

Answer 1

您对 useEffect 中不能包含异步代码的部分是正确的。解决方法与您正在做的类似。

useEffect(() => {

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

  }
  myFunc();
},[]) 

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