React如何传递带返回值的函数作为Props？API传参遇undefined问题

Hey there! Let's dig into why your getStatus function is logging data correctly but returning undefined—this is a super common gotcha with asynchronous data fetching, so you're not alone here.

The Root Cause: Asynchronous Operations Don't Return Data Immediately #

First, let's clarify what's happening in your getStatus function. API requests (like using fetch or axios) are asynchronous—they don't block the rest of your code from running. If your function looks something like this, it's the culprit:

// ❌ Incorrect: No return for the async chain, so function returns undefined
const getStatus = () => {
  fetch('/api/status')
    .then(res => res.json())
    .then(data => {
      console.log(data); // This works because it runs after the API responds
      // But this return only affects the `.then` callback, not the getStatus function
    });
  // The function finishes running here, returning undefined by default
};

When you call this function, it kicks off the API request but immediately returns undefined because the async operation hasn't completed yet. The console.log runs later, once the API responds, but that doesn't change the function's return value.

Fixing the Function: Return the Promise Chain or Use Async/Await #

To make getStatus return the actual API data, you need to return the entire asynchronous chain, or use async/await to wait for the response:

Option 1: Return the Promise Chain

// ✅ Correct: Return the fetch promise so callers can wait for it
const getStatus = () => {
  return fetch('/api/status')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      return data; // Pass data to the next `.then` or await call
    });
};

Option 2: Use Async/Await (More Readable)

// ✅ Correct: Async functions return promises that resolve to your data
const getStatus = async () => {
  const response = await fetch('/api/status');
  const data = await response.json();
  console.log(data);
  return data;
};

Using This with React Router #

If you're using React Router v6+, the cleanest way to pass API data to components is with loader functions. React Router automatically handles asynchronous loaders, waiting for the promise to resolve before rendering your component:

In MyRoutes.js:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Status from './Status';

// Async loader function that fetches data
async function statusLoader() {
  const response = await fetch('/api/status');
  return response.json();
}

const router = createBrowserRouter([
  {
    path: '/status',
    element: <Status />,
    loader: statusLoader, // Attach the loader to the route
  },
]);

export default function MyRoutes() {
  return <RouterProvider router={router} />;
}

In Status.js:

import { useLoaderData } from 'react-router-dom';

export default function Status() {
  const statusData = useLoaderData(); // Get the resolved data from the loader
  return <div>Status: {statusData?.statusMessage}</div>;
}

React's Handling of Async Functions #

React (and React Router) treats asynchronous functions as promises. When you use an async function as a loader, React Router waits for the promise to resolve, then passes the resolved value to your component via useLoaderData.

If you're calling getStatus directly inside a component (not using a loader), you'll need to manage the async state with hooks:

import { useState, useEffect } from 'react';

export default function Status() {
  const [statusData, setStatusData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchStatus = async () => {
      try {
        const data = await getStatus();
        setStatusData(data);
      } catch (err) {
        setError(err);
      }
    };
    fetchStatus();
  }, []);

  if (error) return <div>Oops: {error.message}</div>;
  if (!statusData) return <div>Loading...</div>;

  return <div>Status: {statusData.statusMessage}</div>;
}

Key Takeaway #

The main issue is that asynchronous operations don't return data immediately—your function was finishing before the API responded, hence returning undefined. By ensuring your function returns a promise (either via async/await or returning the .then chain), you let React (or your component) wait for the data to be ready before using it.

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