Uncaught TypeError: Cannot read property 'balance' of undefined

Question

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

下面是 class 当我尝试提交表单时触发错误的五个更新状态。我的项目与 firestore 挂钩，我一直无法缩小平衡对象未定义的原因。

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

谁能帮我解决这个问题，这是我第一次在 Whosebug 上发帖？

Screenshot

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);

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

Uncaught TypeError: Cannot read property 'balance' of undefined

Uncaught TypeError: Cannot read property 'balance' of undefined

forms

onsubmit

reactjs

react-redux