Uncaught TypeError: невозможно прочитать имя свойства undefined в React

Я играю с Mobx-state-tree.

В простой модели, которую я построил, я получаю эту ошибку «Uncaught TypeError: Cannot read property 'name' of undefined».

Я вставляю все блоки кода.

Index.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'));

app.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;

ItemList.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)
            },

Я не уверен, почему возникает эта ошибка?

Вы используете дерево состояний MobX с MobX 4?

Tholle 19.07.2018 14:06

Версии для mobx: 5.0.3 и mobx-state-tree: 3.0.0

ankur 19.07.2018 14:08

в чем разница между mobx и MobX?

ankur 19.07.2018 14:09

Нет никакой разницы. Я хотел написать MobX 4. MST, похоже, теперь добавил поддержку MobX 5, так что это не должно быть проблемой.

Tholle 19.07.2018 14:10

у меня зависимость от mobx-react: 5.2.3. какая версия mobx-react должна быть установлена, если установлена ​​версия mobx 4

ankur 19.07.2018 14:14

Я не уверен. Последний, скорее всего, должен работать.

Tholle 19.07.2018 14:15

Можете ли вы воспроизвести эту проблему в песочнице для кода?

mweststrate 21.07.2018 08:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
7
721
1

Ответы 1

Пропустите ItemList и сделайте это

itemList : types.optional(types.array(Item, []))

Другие вопросы по теме