获取React错误：“setState（...）：只能使用子组件更新已安装或挂载组件”

问题描述：

我一直在追逐这个bug。我有一个简单的React入口点和一个简单的组件状态更改示例组件。如果我将组件插入入口点，如下所示：获取React错误：“setState（...）：只能使用子组件更新已安装或挂载组件”

import React from 'react'; 
import { render } from 'react-dom'; 

export default class Template extends React.Component { 
    constructor(props) { 
    super(props); 

    this.toggleNavbar = this.toggleNavbar.bind(this); 
    this.state = { 
     collapsed: true, 
    }; 
    } 

    toggleNavbar() { 
    this.setState({ 
     collapsed: !this.state.collapsed, 
    }); 
    } 
    render() { 
    return (
     <div> 
     <p>Collapsed: { this.state.collapsed ? 'true' : 'false' }</p> 
     <button onClick={this.toggleNavbar}>Toggle</button> 
     </div> 
    ); 
    } 
} 

render(
    <Template />, 
    document.querySelector('#react-app'), 
);

它按预期工作。您单击切换按钮，文本在“真”和“假”之间来回切换。然而，分钟，我打破它分成两个独立的文件，给我这个为切入点：

import React from 'react'; 
import { render } from 'react-dom'; 

import Template from './components/Template'; 

render(
    <Template />, 
    document.querySelector('#react-app'), 
);

这对于Template.jsx

import React from 'react'; 

export default class Template extends React.Component { 
    constructor(props) { 
    super(props); 

    this.toggleNavbar = this.toggleNavbar.bind(this); 
    this.state = { 
     collapsed: true, 
    }; 
    } 

    toggleNavbar() { 
    this.setState({ 
     collapsed: !this.state.collapsed, 
    }); 
    } 
    render() { 
    return (
     <div> 
     <p>Collapsed: { this.state.collapsed ? 'true' : 'false' }</p> 
     <button onClick={this.toggleNavbar}>Toggle</button> 
     </div> 
    ); 
    } 
}

任何时候，我按一下按钮我得到在控制台中出现以下错误：

build.js：23484警告：setState（...）：只能更新已安装或挂载的组件。这通常意味着您在卸载的组件上调用了setState（）。这是一个没有操作。请检查模板组件的代码。

...我已经检查了所有其他堆栈溢出的错误（也搜索了一吨左右）的答案，并没有一个似乎适用于这里。任何人有任何想法我做错了什么？

侧面说明：我已经尝试添加：

componentWillUnmount() { 
    this.isUnmounted = true; 
}

和!this.isUnmounted检查setState()之前，我仍然得到错误。

谢谢！

我试过剥下一个'创建 - 反应 - 应用程序'到裸露的骨头，并在创建的应用程序中运行您的代码，它只是适用于我。这导致我认为它更可能是建筑/捆绑产生的问题。我的github回购你的问题是https://github.com/finbarrobrien/react-setstate –

试试这个'onClick = {（）=> {this.toggleNavbar（）}}'。还要将jsx文件扩展名添加到您的导入语句'import template from'./components/Template.jsx';' – Fawaz

@ FinbarrO'B - 谢谢。是的，这是一个捆绑问题。我从零开始创建一个全新的应用程序（就像您所做的那样）并设置了所有内容后找到了问题。原来我的.babelrc中有一个错误的行：''plugins“：[”react-hot-loader/babel“]'我认为发生了什么事情，这与我的webpack热重装有某些冲突。无论如何，删除它解决了这个问题。 –

答

我发现了问题：我.babelrc包含这一行：

"plugins": ["react-hot-loader/babel"]

，这是我的WebPack热重装安装的其他部分相冲突。去掉那条线就行了。我认为发生的事情是该组件正在渲染，但不知怎么的反应是对什么是/未安装（可能是非常快速进行安装，卸载，然后重新安装，所以绑定的toggleClick功能试图在旧版本的组件上设置状态？不确定）。

无论如何，故事的寓意是：React代码很好。这是我的配置问题。

获取React错误：“setState（...）：只能使用子组件更新已安装或挂载组件”

相关推荐