Question

我整天都在追逐这个bug。我有一个简单的React入口点和一个简单的组件状态更改示例组件。如果我将组件放入入口点，如下所示：

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'),
);

它按预期工作。单击切换按钮，文本在'true'和'false'之间来回切换。然而，一分钟我把它分成两个单独的文件，给我这个入口点：

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（）。这是一个无操作。请检查模板组件的代码。

...我已经检查了该错误的所有其他Stack Overflow答案（并且还搜索了大约一吨），并且它们似乎都不适用于此处。任何人都知道我做错了什么？

旁注：我尝试添加：

componentWillUnmount() {
  this.isUnmounted = true;
}

并在!this.isUnmounted之前进行setState()检查，我仍然收到错误。

谢谢！

Answer 1

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

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

它与我的webpack热重装设置的其余部分相冲突。删除该行就可以了。我认为正在发生的事情是组件正在渲染，但不知怎的反应是对未安装/未安装的内容感到困惑（可能很快就安装，卸载，然后重新安装，因此绑定的toggleClick功能试图在旧版本的组件上设置状态？不确定）。

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

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

1 个答案: