React Native中使用AsyncStorage的异步辅助函数：弹窗显示本地存储company_id

Hey there, let's sort out this AsyncStorage issue you're having. The main problem right now is that you're calling AsyncStorage.getItem() directly inside the render() method—and that's a big no-no in React. Here's why and how to fix it:

What's Wrong with Your Current Code? #

The render() method is a pure function meant only to return UI based on your component's state/props. Every time your component re-renders (which can happen often), it'll fire that AsyncStorage call again, leading to repeated alerts and unnecessary performance hits. Plus, React doesn't expect side effects like async operations here.

Improved Implementation #

Let's move the AsyncStorage logic to the right lifecycle method (componentDidMount for class components) and add proper error handling:

import React, { Component } from 'react';
import { ActivityIndicator, AsyncStorage, Button, StatusBar, Text, StyleSheet, View } from 'react-native';
import * as pouchDB_helper from '../utils/pouchdb';

type Props = {};
export default class HomeScreen extends Component<Props> {
  state = {
    isLoading: true,
    companyId: null,
    error: null,
  };

  componentDidMount() {
    // This runs ONCE when the component mounts (perfect for async init tasks)
    AsyncStorage.getItem('company_id')
      .then(result => {
        if (result) {
          alert(`Company ID: ${result}`);
          this.setState({ companyId: result, isLoading: false });
        } else {
          alert('No company_id found in storage');
          this.setState({ isLoading: false });
        }
      })
      .catch(err => {
        alert(`Error fetching company_id: ${err.message}`);
        this.setState({ error: err, isLoading: false });
      });
  }

  render() {
    const { isLoading, error, companyId } = this.state;

    if (isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    }

    if (error) {
      return (
        <View style={styles.container}>
          <Text>Oops, something went wrong: {error.message}</Text>
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <Text>{companyId ? `Current Company ID: ${companyId}` : 'No company ID stored'}</Text>
        <Button title="Do Something" onPress={() => { /* Your button action */ }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Key Improvements: #

• Moved async logic to componentDidMount: This lifecycle hook runs only once after the component mounts, so you won't get duplicate AsyncStorage calls or alerts.
• Added state management: Track loading state, fetched company ID, and errors to give users better feedback (like a loading spinner instead of a blank screen).
• Proper error handling: Catch and display errors if AsyncStorage fails, instead of silently failing.
• Fixed the Button typo: Your original code had Butto...—I corrected that to Button.
• Avoided side effects in render: Kept render() pure, focusing only on returning UI based on state.

Additional Notes: #

• If you're using React Native 0.60+, you might want to use @react-native-async-storage/async-storage instead of the deprecated built-in AsyncStorage (it's the official replacement).
• For better user experience, consider replacing the alert() with in-app text display (like the Text component in the example) instead of intrusive popups.

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