警告：无法在尚未安装的组件上调用 setState答案

【问题标题】：Warning: Can't call setState on a component that is not yet mounted警告：无法在尚未安装的组件上调用 setState
【发布时间】：2019-09-26 19:51:15
【问题描述】：

当我在单元测试时尝试更改 setstate 输入值时收到此警告（开玩笑）

警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，直接分配给this.state 或在登录组件中定义具有所需状态的state = {}; 类属性。我的代码是：

this.onChangeEvent = this.onChangeEvent.bind(this);

this.state = { email: '' }

componentDidMount() { this.onChangeEvent(); }

componentWillUnmount() { }

onChangeEvent(event) {     
    this.setState({ email: e.target.value });     
}

我找不到此警告的正确解决方案。有人可以帮我解决这个警告吗？

【问题讨论】：

你的组件是什么样的？
最好将代码发布到 REPL 并分享链接
请附上minimal reproducible example。您现在问题中的代码不完整或语法无效。
@chauhanamit 代码应该在问题描述中，可以是代码块或runnable stack snippet。不鼓励使用场外资源。

标签： javascript reactjs jestjs setstate

【解决方案1】：

上下文绑定和状态初始化必须在constructor内完成。

constructor(props) {
    super(props);
    this.onChangeEvent = this.onChangeEvent.bind(this);

    this.state = { email: '' }
}

【讨论】：

CRA 和 Next.js 默认 babel 配置现在主要支持类实例字段，因此您可以完全避免 constructor 并仍然使用 this。
我知道state initialization 的情况，但bindings 也可能吗？
类似class C { state = {}; onEvent = () => this.setState({}); }
使用arrow functions。但是class methods呢？
我也看不出使用class methods 的意义。感谢您的宝贵时间！

【解决方案2】：

试试这个

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        email: ""
    }
}
onChangeEvent(event) {
    this.setState({
        email: event.target.value
    });
}
render() {
    const {
        email
    } = this.state;
    return ( <div className = "App">
        <input type = "text"
        onChange = { this.onChangeEvent.bind(this)}
        value = {email}/>
        </div>
    );
 }
}

【讨论】：

运行“npm run test”时出现此错误。我正在尝试使用玩笑来测试“电子邮件中是否存在价值”。警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，直接分配给this.state 或在登录组件中定义具有所需状态的state = {}; 类属性。
我在状态下将 email 设置为 null，并且在我的测试代码中我给出了一些值。但是给定的值没有被更新并返回为 null 并出现上述错误。如何更新 setstate 电子邮件值？
请提供您的组件代码以便更好地理解。
我的测试函数是：`describe('email', () => { it('应该返回email', () => { 'let login = new Login(); 'const state = { 'email: '' }; let e = { target: { value: 'emailvalue' } } login.onChangeevent(e); expect(state.email).toBe(e.target.value); })跨度>
我的函数是：constructor(props) { super(props) this.state = { email: '' } } onChangeEvente(e) { this.setState({ email: e.target.value } , () => { }) }