React渲染函数中Promise返回值赋值外部变量异常问题

Hey there! Let's break down why your newCat variable isn't capturing the fetched data properly, and walk through how to fix it.

The Root Cause: Asynchronous Execution #

Here's the core issue: this.props.client.query() returns a promise, which is an asynchronous operation. JavaScript doesn't pause execution to wait for the promise to resolve—it keeps running the code that comes after it immediately.

So when your console.log("newCat is: ",newCat) line runs, the .then() callback hasn't had a chance to set newCat to the fetched data yet. That's why newCat is still undefined, even though the callback later logs the correct cat value.

Solution 1: Move Dependent Logic Inside the .then() Callback #

Any code that relies on the resolved promise data needs to live inside the .then() function. If you want to use this data in your component's UI, you should also update the component's state—this triggers React to re-render with the new data.

// Do this in a lifecycle method like componentDidMount, NOT directly in render!
this.props.client.query({ 
  query: queryCategoriesForCategoryListPage, 
  name: 'fetchCategories', 
  variables: { incubatorId: this.props.getCurrentUser.currentUser.incubator._id } 
}).then((cat)=>{ 
  console.log("cat resolved is: ", cat);
  if(cat.data && cat.data.categories) {
    const newCat = cat.data.categories;
    console.log("newCat is: ", newCat); // This will now log the correct data!
    // Update state to make the data available for rendering
    this.setState({ categories: newCat });
  }
});

Solution 2: Use async/await for Cleaner, More Readable Code #

If you prefer code that reads like synchronous logic, you can use async/await instead of .then(). Just make sure to wrap this in an async function (like a lifecycle method—never make your render function async, React doesn't support that):

async componentDidMount() {
  try {
    const cat = await this.props.client.query({ 
      query: queryCategoriesForCategoryListPage, 
      name: 'fetchCategories', 
      variables: { incubatorId: this.props.getCurrentUser.currentUser.incubator._id } 
    });
    console.log("cat resolved is: ", cat);
    if(cat.data && cat.data.categories) {
      const newCat = cat.data.categories;
      console.log("newCat is: ", newCat);
      this.setState({ categories: newCat });
    }
  } catch (error) {
    // Don't forget to handle errors!
    console.error("Failed to fetch categories: ", error);
  }
}

Critical React Best Practice #

Never run asynchronous data fetching directly in the render() function. Render is meant for generating UI based on current state and props—running async code there will cause unexpected behavior like infinite re-renders or stale data. Always use lifecycle methods (for class components) or useEffect (for functional components) to handle data fetching.

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