React Native中无法用Axios Promise返回值设置全局变量

Hey there, let's figure out why you're having trouble setting that variable with Axios's Promise result in React Native. This issue almost always comes down to asynchronous timing or this binding issues, plus a common React best practice you might be missing. Let's break it down:

First, Let's Fix Your Code #

Looking at your snippet, there are a few obvious gaps (like the truncated thi... which I assume is this). Here's a corrected, working version with explanations:

// If using a class component (common in React Native)
class WeatherComponent extends React.Component {
  constructor(props) {
    super(props);
    // ✅ Use React state instead of a raw global variable (critical for UI updates)
    this.state = {
      temp_high: null
    };
    // ✅ Bind `this` to your method so callbacks have the right context
    this._getForecast = this._getForecast.bind(this);
  }

  _getForecast(zipcode) {
    const request = `http://api.wunderground.com/api/${API_KEY}/forecast/q/${zipcode}.json`;
    
    return axios.get(request)
      .then(response => {
        if (response.status === 200) {
          // ✅ First, verify your data structure (log it to confirm!)
          console.log('API Response:', response.data);
          
          // Extract the temp high (adjust this path to match the actual API response)
          const fetchedTempHigh = response.data.forecast.simpleforecast.forecastday[0].high.fahrenheit;
          
          // ✅ Update state (triggers re-render so UI shows the new value)
          this.setState({ temp_high: fetchedTempHigh });
          
          // If you REALLY need a global variable (not recommended!)
          // global.temp_high = fetchedTempHigh;
          
          return fetchedTempHigh; // Return the value for downstream use
        } else {
          throw new Error(`Request failed with status: ${response.status}`);
        }
      })
      .catch(error => {
        // ✅ Always handle errors!
        console.error('Failed to fetch forecast:', error);
        throw error; // Let the caller handle the error too
      });
  }

  // Example: Call the method when the component mounts
  componentDidMount() {
    this._getForecast('90210')
      .then(tempHigh => {
        // ✅ Only access the value AFTER the Promise resolves
        console.log('Fetched temp high:', tempHigh);
      });
    
    // ❌ This won't work! It runs BEFORE the Axios request finishes
    // console.log(this.state.temp_high); // Will log null
  }

  render() {
    return (
      <View>
        {/* ✅ Show loading state until data is fetched */}
        <Text>High Temperature: {this.state.temp_high || 'Loading...'}</Text>
      </View>
    );
  }
}

Key Issues You Were Likely Facing #

1. Asynchronous Timing #

Axios requests are asynchronous—meaning your code doesn't wait for the API call to finish before moving on. If you tried to access temp_high right after calling _getForecast(), it would still be null because the Promise hasn't resolved yet.

Fix: Always access the value inside the .then() callback, or use async/await for cleaner code:

async componentDidMount() {
  try {
    const tempHigh = await this._getForecast('90210');
    console.log('Fetched temp high:', tempHigh);
  } catch (error) {
    console.error(error);
  }
}

2. this Binding Problem #

If you didn't bind this to your _getForecast method, the this inside the .then() callback wouldn't refer to your component instance—so trying to set this.temp_high would fail silently.

Fix: Either bind in the constructor (as shown above), or define your method with an arrow function:

// Arrow functions automatically bind `this` to the component
_getForecast = (zipcode) => {
  // ... same code as before
}

3. Using Global Variables Instead of React State #

Raw global variables won't trigger React component re-renders. Even if you successfully assign the value, your UI won't update to show it. Using React state (or context for global app state) is the correct approach here.

Quick Debug Tip #

Always log the full response.data in your .then() callback to confirm the structure of the API's JSON response. It's easy to get the path wrong (e.g., maybe the temp is under response.data.forecast.txt_forecast instead—check Wunderground's docs or your log!).

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