javascript - 未捕获的类型错误:无法读取 React 中未定义的属性“名称”
问题描述
我正在玩 Mobx 状态树。
在我建立的一个简单模型中,我收到了这个错误“Uncaught TypeError: Cannot read property 'name' of undefined”。
我正在粘贴所有代码块。
索引.js
import React,{Component} from "react";
import ReactDOM from 'react-dom';
import App from "./app";
import Invoice from "../models/Invoice"
const invoice = Invoice.create({currency:'EUR'}) ;
ReactDOM.render(<App invoice={invoice}/>,document.getElementById('root'));
应用程序.Js
import React,{Component} from "react";
import {observer} from "mobx-react"
class App extends Component
{
render(){
const {invoice} = this.props;
return(
<div className="container-fluid">Invoicer
<h1>{invoice.status()} </h1>
{!invoice.isPaid && <button onClick={invoice.markPaid}>Pay</button>}
</div>
);
}
}
export default observer(App);
模型/Invoice.js
import {types} from "mobx-state-tree";
import ItemList from "./ItemList";
const Invoice = types.model("Invoice",{
currency : types.string,
isPaid:false,
itemList : types.optional(ItemList,{items:[]})
})
.actions( self => ({
markPaid(){
self.isPaid = true;
}
}))
.views( self => ({
status(){
return self.isPaid ? "Paid,Go Home and Enjoy" :"Not Paid,work more and we will think about it";
}
}));
export default Invoice;
项目列表.js
import {types} from "mobx-state-tree";
import {Item} from "./Item";
const ItemList = types.model("ItemList",{
items: types.array(Item)
});
export default ItemList;
item.js
import {types} from "mobx-state-tree"
const Item = types.model("Item",{
quantity : types.number,
price: types.number,
comodityName: types.string
});
export default Item;
使用 npm 编译时终端没有错误。在 bundle.js 中,错误在这一行
array: function(e) {
return new nt(e.name + "[]",e)
},
我不确定为什么会发生此错误?
解决方案
跳过 ItemList 并执行此操作
itemList : types.optional(types.array(Item, []))
推荐阅读
- reactjs - React 渲染和 React-DOM 渲染有什么区别
- angular - 使用 ng-template 插入响应式表单输入(从组件外部)
- java - Jersey 1.x 和 Tomcat:如何以编程方式注册 ContainerRequestFilter,即没有 web.xml?
- corda - /network-map/ack-parameters 的预期用途:参数 Hash 和(?)NodeKey?
- javascript - 加载动态 JavaScript 包的最佳方式
- django - Django queryset - 按不在列表中过滤
- excel - 提取括号中的文本
- javascript - 制作一个向下滑动的 div
- java - Java Persistence API 读取 unicode JSON 列
- python - 从 python 脚本使用 telnet 两次进入服务器时出现问题