将 mobx 可观察数据传递给 props

Question

在 react-typescript 项目中使用 mobx。这个 class 设置可观察数组与 fetch api:

class MenuRepo {
  @observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}];
  @action getItems(): void {
    fetch(`...`)
      .then((response: { value: IMenuModel[] }): void => {
        this.menuItems = [
          { Id: 1, itemName: 'test-item1', childItems: [] }
        ];
      });
  }

并且我想跟踪此组件中的此可观察数据 class:

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

但参数是 "undefined"。我看了一些关于 mobx&react 的教程，但无法解决。

这里 App.tsx 文件：

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

Answer 1

是asd instanceof MenuRepo？请注意，在第一个渲染中，menuItems 将是未定义的，因为它只在获取解析后才获得第一个值，这应该会产生第二个渲染。

请注意，App 应该是 observer，因为这是对 menuItems 可观察对象的取消引用。（更多信息：https://mobx.js.org/best/react.html）

将 mobx 可观察数据传递给 props

pass mobx observable data to props

reactjs

mobx

mobx-react