reactjs - 可观察数组更新未触发渲染方法

Question

在 Repo 类中使用 fetch 方法加载数据很好，但我无法传递它的组件，实际上我希望它重新渲染观察者组件，但它没有发生。他们来了;

菜单组件.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;

应用程序.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;

我检查了执行顺序，在 fetch 中设置可观察字段（menuItems）后，jsx 渲染方法不会重新渲染。

Answer 1

尝试在这里颠倒顺序......从此

@observer
@inject('params')

对这个……

@inject('params')
@observer

来自文档：同时使用@inject 和@observer 时，确保以正确的顺序应用它们：观察者应该是内部装饰器，注入外部。中间可能有额外的装饰器。