web-dev-qa-db-fra.com

erreur: tentative de mise à jour du composant déjà démonté (ou impossible à monter)

Je suis nouveau sur React, j'ai du mal à rendre mon application à cause de cette erreur. Il semble que les données que j'essaye de restituer en tant qu'éléments ne seront pas rendues, car j'aurais tenté de définir l'état à l'état non monté.

Je ne suis pas sûr de savoir comment obtenir cette erreur, car je mets l'état de Data dans componentDidMount.

Comment puis-je résoudre ce problème?

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

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;
javascriptreactjsreact-native
11
Joseph Sortino

Dans votre fonction de rendu, vous appelez this.setState({mounted:true}). De la documentation des composants de React: 

La fonction render () doit être pure, ce qui signifie qu'elle ne modifie pas l'état du composant, elle renvoie le même résultat à chaque appel, et n'interagit pas directement avec le navigateur.

Voici le link à la documentation React sur la fonction de rendu.

6
Andrew

Mon problème c'est que j'oublie

import React from 'react'

dans mon fichier .jsx, puisque je pensais que l’importation de React n’était pas nécessaire dans le composant fonctionnel.

2
jasonxia23

Cette erreur peut se produire d'une autre manière ... en pensant que les accessoires sont des arguments individuels (les accessoires sont en fait un seul argument)

import React from 'react';

const Posts = posts => {       // WRONG

const Posts = ({posts}) => {   // RIGHT
  const renderPosts = () => {
    return posts.map(post => <div>{post.title}</div>);
  };

  return <div>{renderPosts()}</div>;
};
1
lukeaus

Mon problème était dans Sider, puis à l'intérieur de la balise Link, j'ai mal orthographié au lieu de/location que j'ai écrit/locaion.

 <Menu.Item key="2">
      <Icon type="settings" />
      <span><Link style={styles.linkStyle} to="/locations">Locations</Link></span>
    </Menu.Item>
0
MH-Li