Asp.net mvc React.JS视图ASP.NET MVC中未定义的值

我正在制作一个图书馆管理系统，将书籍添加到数据库中。 我是通过ASP.NET MVC实现的，我的视图是在REACT.JS中 创建书本的控制器是：

    public ActionResult Create()
    {
        return View();
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "BookName,BookSerialNumber,BookAuther,BookPublisher")] Book book)
    {
        using (LibraryManagmentSystemDBEntities db = new LibraryManagmentSystemDBEntities())

            if (ModelState.IsValid)
            {
                db.Books.Add(book);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

        return View(book);
    }

我在React.js中的观点如下 错误为未捕获类型错误：无法读取未定义的属性“值” 我还添加了一个屏幕截图，以便更容易指出我的错误

     <div id="app" class="container">
     </div>

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
     <script type="text/babel">

     class InputValues extends React.Component
     {
         constructor(props)
         {
             super(props);
             this.handleSubmit = this.handleSubmit.bind(this);
         }

         handleSubmit(e)
         {
            e.preventDefault();
            const data = new FormData();
            data.append('BookName', this.BookName.value);
            data.append('BookSerialNumber', this.BookSerialNumber.value);
            data.append('BookAuther', this.BookAuther.value);
            data.append('BookPublisher', this.BookPublisher.value);
            var xhr = new XMLHttpRequest();
            xhr.open('post', this.props.url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function()
            {
              if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200)
              {
                  alert("good!!!");
              }
            }
            xhr.send(data);
         }

         render()
         {
            return(
               <div>
                  <form onSubmit={this.handleSubmit}>
                   <label htmlFor="BookName">Book Name </label><br />
                   <input id="BookName" type="text" placeholder="Enter BookName" ref={this.BookName} />
                   <br /><br />

                   <label htmlFor="BookSerialNumber">Book Serial Number: </label><br />
                   <input id="BookSerialNumber" type="text" placeholder="Enter BookSerialNumber" ref={this.BookSerialNumber} />
                   <br /><br />

                   <label htmlFor="BookAuther">BookAuther: </label><br />
                   <input id="BookAuther" type="text" placeholder="BookAuther" ref={this.BookAuther} />
                   <br /><br />

                   <label htmlFor="BookPublisher">BookPublisher: </label><br />
                   <input id="BookPublisher" type="text" placeholder="Enter BookPublisher" ref={this.BookPublisher} />
                   <br /><br />

                   <p>
                    <button type="submit">Submit</button>
                   </p>
                </form>
             </div>
          );
        }
      }
      ReactDOM.render
           (<InputValues />, document.getElementById("app"));


       </script>

类InputValues扩展了React.Component
{
建造师（道具）
{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（e）
{
e、 预防默认值（）；
const data=新表单数据（）；
data.append（'BookName'，this.BookName.value）；
data.append（'BookSerialNumber'，this.BookSerialNumber.value）；
data.append（'BookAuther'，this.BookAuther.value）；
data.append（'BookPublisher'，this.BookPublisher.value）；
var xhr=new XMLHttpRequest（）；
xhr.open（'post'，this.props.url，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhr.onreadystatechange=函数（）
{
if（xhr.readyState==XMLHttpRequest.DONE&&xhr.status==200）
{
警惕（“好！！！”；
}
}
发送（数据）；
}
render（）
{
返回(
书名




书籍序列号：




图书作者：




图书出版商：





提交

);
}
}
ReactDOM.render
（，document.getElementById（“app”）；

---

检查

BookAuther

的拼写。是不是应该是

BookAuthor

？@SungKim我到处都用过这个拼写的BookAuther。这不是问题所在。