时间戳

首页 > 解决方案 > 反应类型错误：this.state 为空

reactjs - 反应类型错误：this.state 为空

问题描述

我正在创建一个联系人管理器应用程序，我可以添加和删除联系人，但我还没有添加编辑功能，我尝试构建一个编辑组件来编辑我的联系人，但是当我运行编辑时组件我收到一条错误消息，说“this.state is null”，这指向编辑组件...这就是我的编辑组件的样子；

class EditContact  extends Component {  
    changeFirstName = (event) => {
        const { contact } = this.state;
         const newContact ={
            ...contact,
            firstName: event.target.value
        };
        this.setState({ contact: newContact });
    }
    changeLastName = (event) => {
        const { contact } = this.state;
        const newContact ={
            ...contact,
            lastName: event.target.value
        };
        this.setState({ contact: newContact });
    }
    changeEmail = (event) => {
        const { contact } = this.state;
        const newContact ={
            ...contact,
            email: event.target.value
        };
        this.setState({ contact: newContact });
    }
    changePhone = (event) => {
        const { contact } = this.state;
        const newContact ={
            ...contact,
            phone: event.target.value
        };
        this.setState({ contact: newContact });
    }
    changeBalance = (event) => {
        const { contact } = this.state;
        const newContact ={
            ...contact,
            balance: event.target.value
        };
        this.setState({ contact: newContact });
    }
    render() {
        return  (
          <>
            <Navbar />
            <div>
                <div className="row">
                    <div className="col-md-6">
                            <Link to="/" className="btn btn-link">
                                <i className="fas fa-arrow-circle-left"></i>Back To Contacts
                            </Link>
                            <br></br>
                            <p>
                                Need to Edit a few things about your Contacts, Go ahead and make all those changes here...!!!
                            </p>
                            <input
                             type="text"
                              onChange={this.changeFirstName}
                              value={this.state.contact.firstName} 
                            />
                            <input
                             type="text"
                              onChange={this.changeLastName}
                               value={this.state.contact.lastName}
                            />
                            <input
                             type="text"
                              onChange={this.changeEmail}
                               value={this.state.contact.email}
                            />
                            <input
                             type="text"
                              onChange={this.changePhone}
                               value={this.state.contact.phone}
                            />
                            <input
                             type="text"
                              onChange={this.changeBalance}
                               value={this.state.contactbalance}
                            />
                    </div> 
                </div>
            </div>
           </>
        );
    }
}

标签： reactjstypeerror

解决方案

您需要在类的构造函数中启动状态：

class EditContact  extends Component {
  constructor(props) {
    super(props) <== Not needed in latest react
    this.state = {
      contact: {},
      ...other
    }
  }

  // Rest of your component

推荐阅读