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

Question

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

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.

我检查了安装情况，当发出此警告但状态没有更新时，组件肯定已安装。当你用谷歌搜索警告时出现的所有内容都与人们在组件卸载后调用它有关，这又不是这里发生的事情。您知道这种情况下会发生什么吗？

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