React中如何在componentDidMount中按顺序调用多个方法

Got it, let's fix this step by step. The most common reason sequential calls fail is if your methods are asynchronous (like API requests, or anything returning a Promise) — regular sequential calls won't wait for them to finish. Here's a straightforward example tailored to your need:

Example: Async Methods (the Most Likely Scenario) #

Let's say you have two async methods: fetchUserDetails() (which grabs user data from an API) and fetchUserOrders() (which needs the user ID from the first call to get their orders). We need to make sure the second call only runs after the first completes.

import React, { Component } from 'react';

class UserProfile extends Component {
  state = {
    user: null,
    orders: [],
    loading: true
  };

  // Async method 1: Fetch user data
  fetchUserDetails = async () => {
    try {
      const response = await fetch('https://api.example.com/user/123');
      const userData = await response.json();
      this.setState({ user: userData });
    } catch (error) {
      console.error('Failed to fetch user:', error);
    }
  };

  // Async method 2: Fetch user orders (depends on user data)
  fetchUserOrders = async () => {
    const { user } = this.state;
    if (!user) return; // Guard clause in case first call failed

    try {
      const response = await fetch(`https://api.example.com/user/${user.id}/orders`);
      const ordersData = await response.json();
      this.setState({ orders: ordersData, loading: false });
    } catch (error) {
      console.error('Failed to fetch orders:', error);
      this.setState({ loading: false });
    }
  };

  componentDidMount = async () => {
    // Wait for fetchUserDetails to finish before calling fetchUserOrders
    await this.fetchUserDetails();
    await this.fetchUserOrders();
  };

  render() {
    const { loading, user, orders } = this.state;
    if (loading) return <div>Loading...</div>;

    return (
      <div>
        <h1>{user.name}</h1>
        <h2>Your Orders:</h2>
        <ul>
          {orders.map(order => (
            <li key={order.id}>{order.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default UserProfile;

Key Notes: #

• We mark componentDidMount as async so we can use await inside it. React doesn't mind if this lifecycle method returns a Promise.
• await ensures each method completes before moving to the next one. This is critical for async operations — without it, fetchUserOrders might run before fetchUserDetails finishes, leading to missing user data.
• For synchronous methods, you don't need async/await — just call them in order:

  componentDidMount() {
    this.initializeSettings();
    this.renderInitialContent();
  }
  

Alternative: Using Promise .then() Chains #

If you prefer not to use async/await, you can chain Promises instead:

componentDidMount() {
  this.fetchUserDetails()
    .then(() => this.fetchUserOrders())
    .catch(error => console.error('Error in sequential calls:', error));
}

Just make sure your async methods return a Promise (which async functions do automatically, or you can explicitly return a Promise in non-async methods).

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