无限API调用回调中更改状态

我正在尝试将数据从API加载到树视图(material-UI)。如果数据是静态的,那么一切都很好,但如果我在回调中使用API,它会触发无限制的调用。。。

const getTreeItemsFromData = (treeItems) => {
  //e.stoppropagation();
  return treeItems.map((treeItemData) => {
    let children = undefined;
    if (treeItemData.children && treeItemData.children.length > 0) {
      children = getTreeItemsFromData(treeItemData.children);
    }
    return (
      <TreeItem
        key={treeItemData.id}
        nodeId={treeItemData.id}
        label={treeItemData.name}
        children={children}
      />
    );
  });
};

export default function UpdateFieldObservations({
  formdata,
  handleChangeParent
}) {
  const [matrixData, setMarixData] = useState([]);

  const airdata = [
    {
      id: 1,
      name: "Soil Vapour",
      children: [
        {
          id: 11,
          name: "Grab Sample"
        },
        {
          id: 12,
          name: "Insitu Meter Reading"
        }
      ]
    }
  ];

  console.log("Call API with matrixId : " + form.matrixId);
  axiosInstance
    .get("/observations/" + form.matrixId, {
      headers: { "Content-Type": "application/json" }
    })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log("Error: " + err);
    });

  return (
    <>
      <TreeView
        className={classes.root}
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        onNodeSelect={handleNodeSelected}
      >
        {getTreeItemsFromData(airdata)}
      </TreeView>
    </>
  );
}

现在,如果我在下面加上

console.log(res)

setMarixData(res);

它从无限制的API调用开始。。我做错了什么,以及如何最好地将这些数据加载到树中,而不是 空中数据