: próba zaktualizowania komponentu, który został już odmontowany (lub nie udało się go zamontować)

Question

Jestem nowy w React, mam problem z renderowaniem aplikacji z powodu tego błędu. Wydaje się, że dane, które próbuję renderować jako elementy, nie będą renderowane z powodu próby ustawienia stanu po odmontowaniu?

Nie jestem pewien, jak otrzymuję ten błąd, ponieważ ustawiam stan Data w componentdidmount, w jaki sposób mogę rozwiązać ten problem?

error: attempted to update component that has already been unmounted (or failed to mount) tekst.

class Profile extends React.PureComponent { 
    static propTypes = { 
    navigation: PropTypes.object, 
    handleLogout: PropTypes.func, 
    user: PropTypes.object, 
    }; 

    static navigationOptions = { 
    headerVisible: true, 
    title: 'Profile', 
    }; 

constructor(props) { 
    super(props); 

    this.state = { 
    data: [], 
    loading: true 

    }; 
    } 

componentDidMount() { 



    fetch("http://10.0.2.2:8080/combined", { method: 'get' }) 
    .then(response => response.json()) 
    .then(data => { 
     this.setState({data: data,}); 

    }) 
    .catch(function(err) { 
    // 
    }) 
} 





    render() { 


    const { user } = this.props; 
    let email; 


    if (user) { 
     email = user.rows[0].ACCTNO; 
    } 
    return (
     <ContentWrapper> 
     <View style={styles.container}> 
      <Image style={styles.header} source={images.profileHeader} /> 
      <View style={styles.body}> 
      <Avatar email={email} style={styles.avatar} /> 
      { 
    this.state.data.map(function(rows, i){ 
     this.setState({mounted: true}); 

    return(
     <View key={i}> 
     <Text>{rows.FIRSTNAME}</Text> 
     </View> 
    ); 
    }) 
}   <Text style={styles.email}>{_.capitalize(email)}</Text> 

      <Button 
       title="Log out" 
       icon={{ name: 'logout-variant', type: 'material-community' }} 
       onPress={this.logout} 
       style={styles.logoutButton} 
      /> 
      </View> 
     </View> 
     </ContentWrapper> 
    ); 
    } 
} 

export default Profile; 

Answer 1

W funkcji renderowania dzwonisz pod numer this.setState({mounted:true}). Z dokumentacji komponentu React to:

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.

Oto link do dokumentacji je rozpoznać funkcji renderowania.