Question

反应形式有问题，我无法弄清楚。提交时得到TypeError: Cannot read property 'value' of undefined。当我在表单中添加“位置”时，问题就开始了。我只是在表单中添加了另一个项目，所以不确定这是如何导致它中断的。我试图解决任何错别字，当我取出“位置”时，它没有问题。

import React from "react";
import Firebase from "firebase";
import config from "./config";

class App extends React.Component {
  constructor(props) {
    super(props);
    Firebase.initializeApp(config);

    this.state = {
      pallets: []
    };
  }

  componentDidMount() {
    this.getUserData();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState !== this.state) {
      this.writeUserData();
    }
  }

  writeUserData = () => {
    Firebase.database()
      .ref("/")
      .set(this.state);
    console.log("DATA SAVED");
  };

  getUserData = () => {
    let ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      this.setState(state);
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    let name = this.refs.name.value;
    let QTY = this.refs.QTY.value;
    let uid = this.refs.uid.value;
    let location = this.refs.location.value;




    if (uid && name && QTY && location) {
      const { pallets } = this.state;
      const devIndex = pallets.findIndex(data => {
        return data.uid === uid;
      });
      pallets[devIndex].name = name;
      pallets[devIndex].QTY = QTY;
      pallets[devIndex].location = location;
      this.setState({ pallets });
    } else if (name && QTY && location) {
      const uid = new Date().getTime().toString();
      const { pallets } = this.state;
      pallets.push({ uid, name, QTY, location });
      this.setState({ pallets });
    }

    this.refs.name.value = "";
    this.refs.QTY.value = "";
    this.refs.uid.value = "";
    this.refs.location.value = "";
  };

  removeData = pallet => {
    const { pallets } = this.state;
    const newState = pallets.filter(data => {
      return data.uid !== pallet.uid;
    });
    this.setState({ pallets: newState });
  };

  updateData = pallet => {
    this.refs.uid.value = pallet.uid;
    this.refs.name.value = pallet.name;
    this.refs.QTY.value = pallet.QTY;
    this.refs.location.value =pallet.location;
  };

  render() {
    const { pallets } = this.state;
    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            <div className="col-xl-12">
              <h1>Creating Pallet App</h1>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-12">
              {pallets.map(pallet => (
                <div
                  key={pallet.uid}
                  className="card float-left"
                  style={{ width: "18rem", marginRight: "1rem" }}
                >
                  <div className="card-body">
                    <h5 className="card-title">{pallet.name}</h5>
                    <p className="card-text">{pallet.QTY}</p>
                    <p className="card-text">{pallet.location}</p>

                    <button
                      onClick={() => this.removeData(pallet)}
                      className="btn btn-link"
                    >
                      Delete
                    </button>
                    <button
                      onClick={() => this.updateData(pallet)}
                      className="btn btn-link"
                    >
                      Edit
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="row">
            <div className="col-xl-12">
              <h1>Add new pallet here</h1>
              <form onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <input type="hidden" ref="uid" />
                  <div className="form-group col-md-6">
                    <label>Name</label>
                    <input
                      type="text"
                      ref="name"
                      className="form-control"
                      placeholder="Name"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>QTY</label>
                    <input
                      type="text"
                      ref="QTY"
                      className="form-control"
                      placeholder="QTY"
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>Location</label>
                    <input
                      type="text"
                      ref="QTY"
                      className="form-control"
                      placeholder="Location"
                    />
                  </div>
                </div>
                <button type="submit" className="btn btn-primary">
                  Save
                </button>
              </form>
            </div>
          </div>

        </div>
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

您尚未创建名为location的裁判

更改：

<input
  type="text"
  ref="QTY"
  className="form-control"
  placeholder="Location"
/>

收件人：

<input
  type="text"
  ref="location"
  className="form-control"
  placeholder="Location"
/>

React.JS TypeError：无法读取未定义的属性“值”

1 个答案: