Learning React: при использовании таблицы ответов и получении ошибки: «Превышена максимальная глубина обновления. Это может случиться ...»

Question

У меня есть следующий код, в котором у меня есть вызов Ax ios для получения массива объектов, и я пытаюсь показать его в таблице. Я пытаюсь использовать "response-table", как показано ниже, с некоторым жестко заданным значением, но получаю сообщение об ошибке "Превышена максимальная глубина обновления. Это может произойти ..."

Если я комментирую setRecipes (x), я нет ошибок

import React from "react";
import {
  useTable,
  useGroupBy,
  useFilters,
  useSortBy,
  useExpanded,
  usePagination,
} from "react-table";
import { useState } from "react";
import { useEffect } from "react";
import { getRecipes, deleteRecipe } from "../services/recipeHistoryService";

const History = () => {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    getRecipes()
      .then((response) => {
        const x = response.data;
        console.log("here  ", x);
        setRecipes(x);
      })
      .catch((error) => {
        setRecipes([]); // reset the [] here - this is optional and is based on expected behaviour
        console.log(error);
      });
  }, []);

  const data = [
    {
      name: "Butter Chicken",
      creationDate: "2018-01-03T19:04:28.809Z",
    },
  ];
  const columns = [
    {
      Header: "Name",
      accessor: "name", // accessor is the "key" in the data
    },
    {
      Header: "Creation Date",
      accessor: "creationDate",
    },
  ];
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data });

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

export default History;

Following is the error
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:23093)
    at scheduleUpdateOnFiber (react-dom.development.js:21164)
    at dispatchAction (react-dom.development.js:15660)
    at useColumnVisibility.js:207
    at publicUtils.js:153
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitLifeCycles (react-dom.development.js:19787)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at history.jsx:22