React组件未接收API获取的state值作为props问题求助

Hey there! Let's figure out why your nearbyShops array is coming through as null in the NearbyShop component—even though your API is clearly returning data. This is super common with async data loading in React, so let's break down the most likely fixes:

1. Fix Your Initial State Value #

Chances are you initialized nearbyShops as null in your App component. When React first renders, it uses that initial state before your API call finishes, so NearbyShop gets null instead of an array.

Fix: Set the initial state to an empty array [] instead of null. This lets your child component safely use array methods like map() without throwing errors.

Example (Class Component): #

class App extends React.Component {
  constructor(props) {
    super(props);
    // Replace null with empty array
    this.state = { nearbyShops: [] };
  }

  componentDidMount() {
    // Your API fetch logic here
    fetch("/api/nearby-shops")
      .then(res => res.json())
      .then(data => {
        this.setState({ nearbyShops: data }); // Update state once data arrives
      })
      .catch(err => console.error("Fetch error:", err));
  }

  // ... rest of your code
}

Example (Function Component): #

function App() {
  // Initialize with empty array
  const [nearbyShops, setNearbyShops] = useState([]);

  useEffect(() => {
    const fetchShops = async () => {
      try {
        const res = await fetch("/api/nearby-shops");
        const data = await res.json();
        setNearbyShops(data);
      } catch (err) {
        console.error("Fetch error:", err);
      }
    };

    fetchShops();
  }, []);

  // ... rest of your code
}

2. Add Conditional Rendering #

Even with an empty initial array, it's good practice to only render NearbyShop once your data is actually ready. This prevents any unexpected behavior and gives users a loading state.

In your App's render method:

render() {
  return (
    <div className="app">
      {/* Only render NearbyShop when we have data */}
      {this.state.nearbyShops.length > 0 ? (
        <NearbyShop shops={this.state.nearbyShops} />
      ) : (
        <p>Loading nearby shops...</p>
      )}
    </div>
  );
}

For function components, the logic is identical—just swap this.state.nearbyShops with the nearbyShops state variable.

3. Double-Check Your API Fetch Logic #

Make sure you're actually updating the state correctly after fetching data. Common mistakes here include:

• Forgetting to call res.json() to parse the API response
• Typos in the state key (e.g., setting nearbyShop instead of nearbyShops)
• Not handling errors that might prevent the state from updating

4. Add Safety Checks in the Child Component #

Even if you fix the parent, adding a safety check in NearbyShop ensures it never breaks if something goes wrong:

function NearbyShop({ shops = [] }) {
  // Default prop to empty array if shops is undefined/null
  return (
    <div className="nearby-shops">
      <h2>Nearby Shops</h2>
      <ul>
        {shops.map(shop => (
          <li key={shop._id}>{shop.name}</li>
        ))}
      </ul>
    </div>
  );
}

Quick Recap #

The core issue is that React renders your components before the API call finishes. By setting an empty initial array, adding conditional rendering, and double-checking your fetch logic, you'll ensure NearbyShop always gets a valid array to work with.

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