未捕获的类型错误： 无法读取未定义的属性'balance'

Question

我有5个状态对象，onSubmit函数用于提交带有5个更新状态对象的表单。onChange方法处理新状态并呈现到客户端列表页。

下面是当我尝试提交表单时触发错误的类，其中有五个更新的状态。我的项目被连接到了firestore，我一直无法缩小为什么平衡对象是未定义的。

最终onSubmit应该将新客户端添加到客户端列表页面，并在firestore数据库中创建一个新客户端。

有人能帮我解决这个问题吗？这是我第一次在stackoverflow发帖？

屏幕截图

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { compose } from "redux";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import PropTypes from "prop-types";
class AddClients extends Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
lastName: "",
email: "",
phone: "",
balance: ""
};
//if not using arrow functions bind the method in constructor(initialising it)
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
//const {firstName,lastName,email,phone,balance} = this.state;
const { newClient } = this.state;
const { firestore, history } = this.props;
if (newClient.balance === "") {
newClient.balance = 0;
}
firestore
.add({ collection: "clients" }, newClient)
.then(() => history.push("/"));
}
render() {
// const { firstName, lastName, email, phone, balance } = this.state;
// console.log(firstName, lastName, email, phone, balance);
const { disableBalanceOnAdd } = this.props.settings;
return (
<div>
<div className="row">
<div className="col-md-6">
<Link to="/" className="btn btn-link">
<i className="fas fa-arrow-circle-left" /> Back To Dashboard
</Link>
</div>
</div>
<div className="card">
<div className="card-header">Add Client</div>
<div className="card-body">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="firstName">First Name</label>
<input
type="text"
className="form-control"
name="firstName"
minLength="2"
required={true}
onChange={this.onChange}
value={this.state.firstName}
/>
</div>
<div className="form-group">
<label htmlFor="lastName">Last Name</label>
<input
type="text"
className="form-control"
name="lastName"
minLength="2"
required={true}
onChange={this.onChange}
value={this.state.lastName}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
name="email"
onChange={this.onChange}
value={this.state.email}
/>
</div>
<div className="form-group">
<label htmlFor="phone">Phone</label>
<input
type="text"
className="form-control"
name="phone"
minLength="10"
required={true}
onChange={this.onChange}
value={this.state.phone}
/>
</div>
<div className="form-group">
<label htmlFor="balance">Balance</label>
<input
type="text"
className="form-control"
name="balance"
minLength="1"
required={true}
onChange={this.onChange}
value={this.state.balance}
disabled={disableBalanceOnAdd}
/>
</div>
<input
type="submit"
value="Submit"
className="btn btn-primary btn-block"
/>
</form>
</div>
</div>
</div>
);
}
}
AddClients.propTypes = {
firestore: PropTypes.object.isRequired,
settings: PropTypes.object.isRequired
};
export default compose(
firestoreConnect(),
connect((state, props) => ({
settings: state.settings
}))
)(AddClients);

Answer 1

我认为你在这里做错了什么。行中的内部onSubmit功能

const { newClient } = this.state;

您应该将其分配为，

const newClient = Object.assign({}, this.state);

这将创建该.state对象的副本，并将其分配给newClient常量。然后您可以访问其属性newClient.balance。