Question

我有一个简单的复选框组件：

import React, { Component } from 'react';

class Checkbox extends Component {
  constructor(props) {
    super(props);

    this.state = { isChecked: false };

    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  render() {
    return (
      <div className="checkbox">
        <input type="checkbox" checked={this.state.isChecked} onChange={this.handleCheckboxChange} />
        Checkbox
      </div>
    );
  }

  handleCheckboxChange(e) {
    this.setState({ isChecked: e.target.checked });
  }
}

export default Checkbox;

但是，切换复选框会产生以下错误：

警告：setState（...）：只能更新已安装或已安装零件。这通常意味着您在已卸载时调用了setState（）零件。这是一个无操作。请检查复选框的代码成分

创建受控组件时我是否遗漏了什么？

Answer 1

将handlecheckbox方法移动到渲染之外（在构造函数和渲染之间）会发生什么？

Answer 2

想出来，这是react-hot-loader的一个问题。显然保存this的值在react-hot-loader的构造函数中不起作用。修复方法是手动启用babelrc中的transform-es2015-classes插件。我以前遇到过这个问题，但它消失了，所以我认为它已经修复了，但是它又随机弹出了。

React简单复选框组件 - 警告：setState（...）：只能更新已安装或安装的组件

2 个答案: