setState（...）：只能更新已安装或安装的组件。 这通常意味着您在已卸载的组件上调用了setState（）。 这是一个无操作

Question

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 Menu component.

I don't know what happen. I just keep find this error in my project. I don't really understand about this error because this error doesn't give me specific information. Now, i confused this error made me little bit stressed

export default class Menu extends Component {
    constructor(){
        super();
        this.state = {
            user: {},
            loading: true,
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2 }),
            items: [],
        }
    }
    componentDidMount(){
        AsyncStorage.getItem('userData').then((user) => {
            let userData = JSON.parse(user)
            this.setState({
                user: userData,
            })
        })
        firebase.database().ref('Posts').limitToLast(10).on('value', (snap) => {
            console.log('new', snap.val())
            snap.forEach((child) => {
                this.state.items.push({
                    title: child.val().title,
                    key: child.key,
                    author: child.val().authorName,
                    image: child.val().picture,
                    price: child.val().price,
                    description: child.val().description,
                    stock: child.val().stock,
                    authorId: child.val().authorId
                });
            });
            this.setState({ 
                dataSource: this.state.dataSource.cloneWithRows(this.state.items),
                loading:false
            });
        });
    }

    logOut(){
        AsyncStorage.removeItem('userData').then(() => {
            firebase.auth().signOut();
                this.props.navigation.navigate('Index')
        })
    }

    renderRow(data) {
        return (
        <View style={styles.listProduct} key={data.key}>
            <TouchableOpacity 
             onPress={() => this.props.navigation.navigate('Detail', {data})}
            >
            <Text style={styles.titleProduct}> {data.title} </Text>
            <Text style={styles.textProduct}>{data.author}</Text>
            <Image
             source={{ uri:data.image }}
             style={{
                height: 150,
                width: 150,
                alignSelf: 'center',
            }}
          />
        </TouchableOpacity>
        <View style={styles.postInfo}>
          <Text style={styles.textProduct}>Rp.{data.price}</Text>
        </View>
        </View>
        )
    }

    render(){
        if (this.state.loading){
            return <ActivityIndicator size="large" />
        }

        console.ignoredYellowBox = ['Remote debugger'];
        console.ignoredYellowBox = ['Setting a timer'];
        console.log(this.state.user)
        const { navigate } = this.props.navigation
        return(
            <ScrollView>
            <View style={styles.container}>
                <View style={styles.header}>
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('Checkout')}>
                    <Icon name='md-cart' size={30} color='#eee'/>
                    </TouchableOpacity>
                    <View>
                    <TouchableOpacity onPress={this.logOut.bind(this)}>                    
                    <Icon name='ios-log-out-outline' size={30} color='#eee' />
                    </TouchableOpacity>
                    </View>

                    <View style={styles.addItem}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Add')}>
                    <Icon name='md-add' size={30} color='#eee' />
                    </TouchableOpacity>
                    </View>               
                </View>

                    <ListView
                      dataSource={this.state.dataSource}
                      renderRow={this.renderRow.bind(this)}
                      enableEmptySections={true}
                      />
            </View>
            </ScrollView>
        )
    }
}

Answer 1

You need to remove event listeners any other type of listeners when you un-mount the component. Firebase query is trying to update the state event though the component is unmounted. You can use off method to remove listeners of firebase.

Another possible problem with your code is that you are manipulating state values directly. This is not a good practice. Below code is an example of how you can achieve similar affect with what you are already trying to do.

Example

onData = (snap) => {
  console.log('new', snap.val())
  snap.forEach((child) => {
    this.setState((prevState) => {
      const newState = Object.assign({}, prevState);
      newState.items.push({
        title: child.val().title,
        key: child.key,
        author: child.val().authorName,
        image: child.val().picture,
        price: child.val().price,
        description: child.val().description,
        stock: child.val().stock,
        authorId: child.val().authorId
      });
      return newState;
    });
  });
  this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(this.state.items),
    loading:false
  });
}

componentDidMount(){
    AsyncStorage.getItem('userData').then((user) => {
        let userData = JSON.parse(user)
        this.setState({
            user: userData,
        })
    })
    firebase.database().ref('Posts').limitToLast(10).on('value', this.onData );
}

componentWillUnmount() {
  firebase.database().ref('Posts').limitToLast(10).off('value', this.onData );
}