错误：尝试更新已卸载（或未能安装）的组件答案

【问题标题】：error: attempted to update component that has already been unmounted (or failed to mount)错误：尝试更新已卸载（或未能安装）的组件
【发布时间】：2017-10-17 07:05:26
【问题描述】：

我是 React 新手，由于这个错误，我无法渲染我的应用程序。似乎我试图渲染为元素的数据由于在卸载时尝试设置状态而无法渲染？

我不确定我是如何得到这个错误的，因为我在componentDidMount 中设置Data 的状态。

我该如何解决这个问题？

错误：试图更新已卸载（或未能安装）的组件

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;

【问题讨论】：

您的地图功能是发生错误的原因。你在 render() 中调用 setState。

标签： javascript reactjs react-native

【解决方案1】：

我的问题出在 Sider 中，然后在 Link 标记中我拼错了 /location 而不是 /location 我写了 /locaion 。

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

【讨论】：

【解决方案2】：

我的问题是我忘记了

import React from 'react'

在我的.jsx 文件中，因为我认为在功能组件中不需要导入 React。

【讨论】：

【解决方案3】：

还有另一种可能发生此错误的方式...认为 props 是单个参数（props 实际上是单个参数）

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

【讨论】：

这实际上并没有回答所提出的问题，但这是 google 上该错误的第一名结果，因此在这里作为参考。

【解决方案4】：

在您的渲染函数中，您调用的是this.setState({mounted:true})。来自 React 的组件文档：

render() 函数应该是纯函数，即不修改组件状态，每次调用都返回相同的结果，不直接与浏览器交互。

这是关于渲染函数的 React 文档的 link。

【讨论】：

您的第一个建议是正确的，但您的第二个不正确。如果您不在箭头函数上提供括号，它将隐式返回。所以.then(response => response.json()) 与.then(response => { return response.json(); }) 相同
@MattAft @Andrew 此错误的其他原因是什么？对我来说，它显示“尝试更新已卸载（或未能安装）的组件SmallSpinner。”但我没有在渲染函数中执行 setState