Ошибка: попытка обновления компонента, который уже был удален (или не смонтирован)

Я новичок в React, у меня проблемы с рендерингом моего приложения из-за этой ошибки. Кажется, данные, которые я пытаюсь отобразить как элементы, не будут отображаться из-за попытки установить состояние при размонтировании?

Я не уверен, как я получаю эту ошибку, так как я устанавливаю состояние Data в componentDidMount.

Как я могу исправить эту проблему?

ошибка: попытка обновить компонент, который уже был размонтирован (или не смонтирован)

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;

Ответ 1

В вашей функции рендеринга вы вызываете this.setState({mounted:true}). Из документации по компонентам React:

Функция render() должна быть чистой, что означает, что она не изменяет состояние компонента, она возвращает тот же результат при каждом вызове и не взаимодействует напрямую с браузером.

Здесь ссылка на документацию React на функцию рендеринга.

Ответ 2

Моя проблема в том, что я забываю

import React from 'react'

в моем .jsx файле, так как я думал, что импортный React не нужен в функциональном компоненте.

Ответ 3

Есть и другая ошибка, которая может возникнуть... думая, что реквизиты являются отдельными аргументами (реквизит на самом деле является единственным аргументом)

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>;
};

Ответ 4

Моя проблема была в Sider, затем внутри тега Link я сделал misspell вместо /location, которое я написал /locaion.

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