Question

异步 API 调用导致的无效钩子调用

2020-11-13

942

javascript reactjs react-native react-redux react-hooks

我尝试在功能组件中使用 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();
},[])

这可能无法回答您的问题，但这是一种您可能会觉得有用的常见模式 :)

Answer 2

请尝试这个。

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