Reactjs React.JS TypeError:无法读取属性'；价值'；未定义的

react表单有问题，我无法解决。我收到

TypeError:提交时无法读取未定义的属性“value”。当我在表单中添加“位置”时，问题就开始了。不确定这是如何导致它中断的，因为我只是在表单中添加另一项。我试图修复任何打字错误，当我取出“位置”时，它提交时没有任何问题

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;

从“React”导入React；
从“Firebase”导入Firebase；
从“/config”导入配置；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
Firebase.initializeApp（配置）；
此.state={
托盘：[]
};
}
componentDidMount（）{
这是getUserData（）；
}
componentDidUpdate（prevProps、prevState）{
if（prevState！==此.state）{
此参数为.writeUserData（）；
}
}
writeUserData=（）=>{
Firebase.database（）
.ref（“/”）
.设置（此状态）；
console.log（“保存的数据”）；
};
getUserData=（）=>{
设ref=Firebase.database（）.ref（“/”）；
参考on（“值”，快照=>{
const state=snapshot.val（）；
本.设置状态（状态）；
});
};
handleSubmit=事件=>{
event.preventDefault（）；
让name=this.refs.name.value；
设数量=此参考数量值；
设uid=this.refs.uid.value；
让位置=this.refs.location.value；
if（uid&&name&&QTY&&location）{
const{pallets}=this.state；
const devIndex=托盘。findIndex（数据=>{
返回data.uid==uid；
});
托盘[devIndex]。名称=名称；
货盘[devIndex]。数量=数量；
托盘[devIndex]。位置=位置；
这个.setState（{pallets}）；
}else if（名称、数量和位置）{
const uid=new Date（）.getTime（）.toString（）；
const{pallets}=this.state；
托盘推送（{uid，名称，数量，位置}）；
这个.setState（{pallets}）；
}
this.refs.name.value=“”；
this.refs.QTY.value=“”；
this.refs.uid.value=“”；
this.refs.location.value=“”；
};
removeData=托盘=>{
const{pallets}=this.state；
const newState=pallets.filter（数据=>{
return data.uid！==pallet.uid；
});
this.setState（{pallets:newState}）；
};
updateData=托盘=>{
this.refs.uid.value=pallet.uid；
this.refs.name.value=pallet.name；
this.refs.QTY.value=托盘数量；
this.refs.location.value=托盘.location；
};
render（）{
const{pallets}=this.state；
返回(
创建托盘应用程序
{pallets.map（pallet=>(
{pallet.name}
{托盘数量}
{pallet.location}
此.removeData（托盘）}
className=“btn btn链接”
>
删除
此.updateData（托盘）}
className=“btn btn链接”
>
编辑
))}
在此添加新托盘
名称
数量
位置
拯救
);
}
}
导出默认应用程序；
您尚未创建名为
位置的引用

更改：

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



致：


你能按照错误消息引用的行发布你所遇到的确切错误吗？TypeError:无法读取未定义应用程序的属性“value”。\u this.handleSubmit C:/Users/Web Content/Desktop/react firebase real time database basic/src/App.js:45 42 | let name=this.refs.name.value；43 |让数量=此参考数量值；44 |让uid=this.refs.uid.value；>45 |让位置=this.refs.location.value；|^抱歉，无法确定格式问题似乎是由第45行引起的位置输入的参考是数量，可能是导致问题的原因？@HagaiHarari我刚刚尝试了禁止，但无论如何，谢谢！我以前试过，但看起来好像是我的错别字！非常感谢你！
<input
  type="text"
  ref="location"
  className="form-control"
  placeholder="Location"
/>