无法使用 webpack-dev-server 调用 React.Component.setState()答案

【问题标题】：Cannot call React.Component.setState() with webpack-dev-server无法使用 webpack-dev-server 调用 React.Component.setState()
【发布时间】：2017-04-28 16:49:00
【问题描述】：

我有一个相当普通的react 组件，我想在其中跟踪input 的值。组件定义如下。

import React from 'react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'initial value' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (<input onChange={this.handleChange} />);
  }
}

如果我使用 webpack 编译代码，这将完美运行，但是当我尝试使用 webpack-dev-server 进行热重载时，我会收到此错误：

(unknown) Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component.

我已经检查了安装，当这个警告被吐出但状态没有更新时，组件肯定已经安装。当你用谷歌搜索警告时出现的一切都与人们在组件卸载后调用它有关，这又不是这里发生的事情。有什么想法可以在这种情况下发生吗？

【问题讨论】：

在返回语句中，有一个错字 - nChange 应该是 onChange - 可能与您的问题没有任何关系，但值得修正。
谢谢，这只是在复制和格式化时打错了。
重启服务器可能值得一试，因为热重载有时会停止工作
我遇到了同样的事情。当我禁用热替换时，一切正常。我仔细检查了react-hot-boilerplate#next 并进行了比较（我使用的是react-hot-loader@3.0.0-beta.7）并且没有发现任何错误。所以这是某个地方的问题，只是不确定在哪里。
@Ivanna 我遇到了同样的问题。你解决了吗？

标签： javascript reactjs webpack-dev-server setstate

【解决方案1】：

我使用了您的组件（修正了 onChange 错字）并添加了一个导出语句。工作正常！

import React from 'react';

class MyInput extends React.Component {
    constructor(props) {
    super(props);
    this.state = { value: 'initial value' };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
    this.setState({ value: event.target.value });
}

render() {
    return (
        <input onChange={this.handleChange} />
    );
  }
}
export default MyInput;

【讨论】：

你试过webpack-dev-server吗？我在最初的问题中说组件工作正常，这是热重载的一些问题。