React Native：setState +已卸载或正在安装的组件

Question

I am trying to conditionally display either a Home or Slider component in the screen below, but when the onDone function runs, i am getting the error:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the Onboarding component.

The Onboarding component is inside the Slider (react-native-onboarding-swiper - used for app intro)...

export default class HomeScreen extends Component {
  static navigationOptions = {
    headerStyle: {
      backgroundColor: 'skyblue',
      elevation: 0,
      borderBottomWidth: 0,
    },
    headerLeft: null,
  };

  state = {
    introLoaded: false,
  };

  async componentDidMount() {
    const value = await AsyncStorage.getItem('@SKIP_INTRO');
    if (value !== null) {
      this.onDone();
    }
  };

  onDone = async () => {
    await this.setState({ introLoaded: true });
  };

  render() {
    return this.state.introLoaded ? (
      <Home navigation={this.props.navigation} />
    ) : (
      <Slider onDone={this.onDone} />
    );
  }
}

Any help appreciated...

Slider.js

import React from 'react';
import { Image, Text } from 'react-native';
import PropTypes from 'prop-types';
import Onboarding from 'react-native-onboarding-swiper';
import styles from './styles';

const Slider = ({ onDone }) => (
  <Onboarding
    pages={[
      {
        backgroundColor: 'skyblue',
        image: (
          <Image source={require('../../assets/images/intro/pic1.png')} style={styles.image} />
        ),
        title: <Text style={styles.title}>Title 1</Text>,
        subtitle: <Text style={styles.subtitle}>Subtitle 1</Text>,
      },
      {
        backgroundColor: 'skyblue',
        image: (
          <Image source={require('../../assets/images/intro/pic2.png')} style={styles.image} />
        ),
        title: <Text style={styles.title}>Title 2</Text>,
        subtitle: <Text style={styles.subtitle}>Subtitle 2</Text>,
      },
    ]}
    onDone={onDone}
  />
);

Slider.propTypes = {
  onDone: PropTypes.func.isRequired,
};

export default Slider;

Answer 1

First setState is not an asynchronous method . For more information read here .

Second in your approach HomeScreen is calling method onDone inside componentDidMount lifecycle method as the component mounted it will automatically unload Slider and just show error as you are changing state.

So, instead of using Onboarding inside stateless component use it inside state component and use it in the Welcome Screen (the screen where user is not logged in and see for first time). Once user logged in just navigate to the other screen so this welcome screen will not be visible to user again. let me know if you need more information.