React中props传递的getArrData函数更新时提示‘不是函数’问题

核心问题分析 #

创建操作后调用getArrData正常，更新时却报错，大概率是更新场景下getArrData的props传递异常，或函数引用在组件渲染过程中丢失/变更。以下是具体排查和解决步骤：

1. 先排查控制台输出 #

查看handleUpdate里的console.log('getarrdata---------------------', getArrData)输出：

• 若输出为undefined：说明打开更新弹窗时，ItemCategoryQuickEditForm未接收到getArrData props。检查list.js中渲染弹窗的代码，确保getArrData={getArrData}这个prop没有遗漏。
• 若输出为非函数值：说明getArrData被意外覆盖，检查list.js的props传递逻辑，避免拼写错误或传错变量。

2. 用useCallback稳定函数引用 #

在list.js中，getArrData每次组件渲染都会重新创建，若list.js因状态变化重新渲染，弹窗可能拿到旧的无效引用。用useCallback包裹函数，保持引用稳定：

import { useCallback } from 'react';

// 重构getArrData，统一用async/await+try/catch写法
const getArrData = useCallback(async () => {
  console.log("from cat list");
  try {
    const res = await axios.get('http://localhost:8080/itemreq/getallireq');
    const newData = res.data.map(user => ({
      itemReqId: user.itemRequisitionId,
      itemName: user.requiredItem.itemName,
      quantity: user.quantity,
      status: user.reqStatus.reqStatusName,
      requiredBy: user.requiredByDate,
      reason: user.reason
    }));
    setTableData(newData.reverse());
    console.log('Item Category data ============>', res.data);
  } catch (err) {
    console.error(err);
  }
}, []); // useState的setter是稳定引用，无需加入依赖数组

3. 调整函数调用顺序 #

如果是onClose后弹窗组件被卸载导致getArrData失效，把刷新操作放在关闭弹窗之前：

const handleUpdate = async (data) => {
  const itemreq = {
    requiredItem: selectedItem,
    reason: data.reason,
    quantity: data.quantity,
    requiredByDate: data.requiredby,
  };
  const url = `http://localhost:8080/itemreq/updateitemreq/${data.item}`;
  await axios.put(url, itemreq);

  // 先刷新数据，再关闭弹窗
  await getArrData();
  onClose();
  enqueueSnackbar('Update success!');
};

4. 验证currentUser逻辑 #

确认currentUser存在时确实为更新场景，且此时弹窗的props传递无异常——比如打开更新弹窗时，是否正确同时传递了currentUser和getArrData。

内容的提问来源于stack exchange，提问作者Atharva Kulkarni