React传递函数作为Prop后newData始终为undefined问题排查

你遇到的问题是自定义MUI表格组件中，传递的findAllComplementosFilter函数调用后返回undefined，但API请求本身正常。以下是几个核心排查方向：

1. 确保findAllComplementosFilter返回异步结果 #

这个函数必须返回Promise（或标记为async），否则await无法获取到API响应数据。

错误示例（无返回值）： #

function findAllComplementosFilter(search, page, rowsPerPage) {
  // 只发起请求但没return，函数默认返回undefined
  axios.get('/api/complementos', { params: { search, page, rowsPerPage } });
}

正确写法： #

// 方式1：async函数自动返回Promise
async function findAllComplementosFilter(search, page, rowsPerPage) {
  const response = await axios.get('/api/complementos', { params: { search, page, rowsPerPage } });
  return response.data; // 返回API响应的核心数据
}

// 方式2：直接返回axios的Promise
function findAllComplementosFilter(search, page, rowsPerPage) {
  return axios.get('/api/complementos', { params: { search, page, rowsPerPage } })
    .then(response => response.data); // 提前解析出data
}

2. 检查findAllComplementosFilter的错误处理逻辑 #

如果函数内部捕获了错误但没有重新抛出或返回值，会导致函数返回undefined，且子组件的try/catch无法捕获到错误。

错误示例（吞掉错误）： #

async function findAllComplementosFilter(search, page, rowsPerPage) {
  try {
    const response = await axios.get('/api/complementos', { params: { search, page, rowsPerPage } });
    return response.data;
  } catch (err) {
    console.error('请求出错:', err);
    // 这里没有抛出错误，函数会返回undefined
  }
}

修正方式： #

async function findAllComplementosFilter(search, page, rowsPerPage) {
  try {
    const response = await axios.get('/api/complementos', { params: { search, page, rowsPerPage } });
    return response.data;
  } catch (err) {
    console.error('请求出错:', err);
    throw err; // 重新抛出错误，让子组件的catch捕获
  }
}

3. 验证子组件调用时的参数有效性 #

在子组件的petitionData函数中，先打印传递给fetchData的参数，确认data.searchText、data.page、data.rowsPerPage都是有效值：

const petitionData = async () => {
  try{
    // 先打印参数，确认是否符合API要求
    console.log('请求参数:', data.searchText, data.page, data.rowsPerPage);
    const newData = await fetchData(
      data.searchText,
      data.page,
      data.rowsPerPage
    );
    // ...后续逻辑
  }catch(err){
    console.error("error ",err)
  }
};

如果参数是undefined或不符合API要求，可能导致API返回空结构，但正常情况下API应该返回含content、totalElements的空对象，而非undefined。

4. 直接在父组件测试函数返回值 #

在父组件中直接调用findAllComplementosFilter，确认它能返回预期数据：

// 父组件中添加测试代码
const testFetch = async () => {
  const result = await findAllComplementosFilter(searchText, complementos.page, complementos.rowsPerPage);
  console.log('父组件测试返回值:', result);
};
// 触发测试
testFetch();

如果这里的result也是undefined，问题肯定出在findAllComplementosFilter函数本身；如果这里有值，再检查子组件的data状态是否正确初始化或更新。

内容的提问来源于stack exchange，提问作者Etzel Perez