webentwicklung-frage-antwort-db.com.de

fehler: Es wurde versucht, eine Komponente zu aktualisieren, die bereits nicht bereitgestellt wurde (oder die nicht bereitgestellt werden konnte).

Ich bin neu in React. Aufgrund dieses Fehlers habe ich Probleme beim Rendern meiner App. Es sieht so aus, als ob die Daten, die ich als Elemente rendern möchte, nicht gerendert werden, weil versucht wird, den Status festzulegen, wenn sie nicht gemountet sind.

Ich bin nicht sicher, wie ich diesen Fehler erhalte, da ich den Status von Data in componentDidMount einstelle.

Wie kann ich dieses Problem beheben?

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

In Ihrer Renderfunktion rufen Sie this.setState({mounted:true}) auf. Aus der Komponentendokumentation von React: 

Die render () - Funktion sollte pure sein, was bedeutet, dass sie den Komponentenzustand nicht ändert, bei jedem Aufruf das gleiche Ergebnis zurückgibt und nicht direkt mit dem Browser interagiert.

Hier ist der link zur React-Dokumentation zur Renderfunktion.

6
Andrew

Mein Problem ist das ich vergesse

import React from 'react'

in meiner .jsx-Datei, da ich dachte, dass der Import von React in der Funktionskomponente nicht erforderlich ist.

2
jasonxia23

Es gibt eine andere Möglichkeit, wie dieser Fehler auftreten kann ... zu denken, dass Requisiten individuelle Argumente sind (Requisiten sind eigentlich ein einziges 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

Mein Problem war in Sider. Dann habe ich innerhalb des Link-Tags falsch geschrieben, anstatt/location habe ich/locaion geschrieben.

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