react state初始化问题

本文解决了一个常见的React开发问题,即在组件构造函数中调用setState()导致的错误。阐述了正确的初始化状态的方法,并提供了代码修改建议。

react state初始化问题

报错

Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the *** component.

大致:

不能再一个组件尚未mounted时调用 setState() 方法,这是一个空操作,但是可能会导致bug,所以, 直接给this.state 赋值,或者定义成state = {};

问题代码

import React from 'react';
import { Icon } from 'antd';

class ProjMain extends React.Component {
  constructor(props) {
    super(props);
    this.setState({
      docDetail: {}
    })
  }
  
  render() {
    return (
        <div id={Style.projIndex}>
         	<h1 style={{fontSize: 40}}>{this.state.docDetail))}</h1>
        </div>
    );
  }
}

export default ProjMain;
render() 方法中如果使用了 this.state.docDetail,会导致编译报错

error

仔细检查代码

constructor(props) {
    super(props);
    this.setState({
      docDetail: {}
    })
  }

constructor 里使用了 setState,改为直接赋值后正常

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值