使用异步 API 调用的无效挂钩调用答案

【问题标题】：Invalid Hook Call with Async API Call使用异步 API 调用的无效挂钩调用
【发布时间】：2021-02-25 01:31:56
【问题描述】：

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

错误信息：

【问题讨论】：

MyTable 是一个 React 组件吗？它返回 jsx 吗？

标签： javascript reactjs react-native react-redux react-hooks

【解决方案1】：

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

useEffect(() => {

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

  }
  myFunc();
},[])

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

【讨论】：

【解决方案2】：

请试试这个。

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

【讨论】：