渲染方法不可触发与可观察数组更新

问题描述：

数据加载与回收类中的提取方法罚款，但我无法传递它的组件，实际上我希望它重新呈现观察员组件，但它不会发生。他们来了;渲染方法不可触发与可观察数组更新

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字段（的菜单项）后未方法重新呈现。

你过得好吗？哟需要使用**提供者**才能通过商店。看到一个例子http://*.com/questions/42268727/react-getting-observable-values-in-component/42275527#42275527 – Hosar

@Hosar“

”是不是这个通过商店？我看到教程他们通过这种方式 – TyForHelpDude

你的意思是我需要使用“导入{供应商}从'mobx-react';” ？但许多样品不使用它？ – TyForHelpDude

答

尝试此处倒车...的顺序从这个

@observer 
@inject('params')

这个...

@inject('params') 
@observer

from documentation:当同时使用@Inject和@Observer，确保在应用它们正确的顺序：观察者应该是内部装饰者，注入外部。之间可能还有其他装饰器。

渲染方法不可触发与可观察数组更新

相关推荐