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

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

未捕获到的TypeError：无法读取未定义的属性“ balance”

1 个答案: