2017-02-19 4 views
0

Загрузка данных с помощью метода выборки в классе Repo отлично, но я не мог передать ее компоненту, на самом деле я ожидаю, что она будет повторно отображать компонент наблюдателя, но это не произойдет. Вот они;метод визуализации не запускается с наблюдаемым обновлением массива

MenuComponent.tsx:

@observer 
@inject('params') 
class MenuComponent extends React.Component<{params?:IMenuModel[]}, {}> { 
    render() { 
    //params undefined. 
    var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{ 
     return (<li key={item.Id}>{item.itemName}</li>) 
    }):[]; 
    return render(){...} 

MenuRepo.tsx:

class MenuRepo { 
    @observable menuItems?: IMenuModel[]; 
    constructor() { 
    this.getItems(); 
    } 
    @action getItems(): void { 
    fetch(`..`).then((response: Response): Promise<{ value: IMenuModel[] }> => { 
     this.menuItems = [ 
      { Id: 1, itemName: 'test-item1', childItems: [] } 
     ];//property setted here.. 
    }) 
     } 
    } 
export default new MenuRepo; 

App.tsx;

import Menu from './components/MenuComponent'; 
import menuCodes from './components/MenuRepo'; 
class App extends React.Component<null, null> { 
    render() { 
    return (
     <div className="App"> 
     <Menu params = {menuCodes.menuItems}/> 
     </div> 
    ); 
    } 
} 
export default App; 

Я проверил порядок выполнения, JSX визуализации метод не пересборку после установки observerable поля (MenuItems) в выборке.

+0

Как вы проходите мимо магазина? Yo нужно использовать ** Провайдер **, чтобы передать магазин. См. Пример http://stackoverflow.com/questions/42268727/react-getting-observable-values-in-component/42275527#42275527 – Hosar

+0

@Hosar "

" is not this pass магазин ? Я видел учебное пособие, которое они передают таким образом – TyForHelpDude

+0

Вы имеете в виду, что мне нужно использовать «import {Provider} из« mobx-react »;» ? но многие образцы не используют его? – TyForHelpDude

ответ

0

попытка изменить порядок здесь ... от этого

@observer 
@inject('params') 

к этому ...

@inject('params') 
@observer 

from documentation: При использовании обоих @Inject и @observer, убедитесь, что применять их в правильный порядок: наблюдатель должен быть внутренним декоратором, вводить внешний. Между ними могут быть дополнительные декораторы.